Základy Google Font API - Triky CSS

Odkaz na soubory CSS

V zásadě provádíte přímé odkazy na soubory CSS na Google.com. Prostřednictvím parametrů adresy URL specifikujete, která písma chcete a jaké varianty těchto písem.

… 

Nápad: Dalšímu síťovému požadavku se můžete vyhnout otevřením této šablony stylů a zkopírováním a vložením obsahu @ font-face do hlavní šablony stylů. Ale pozor: Google dělá nějaké čichání User Agent, aby podle potřeby někdy sloužil různým věcem na různá zařízení. Pokud to uděláte tímto způsobem, nebudete z toho mít prospěch.

CSS

Ve svém CSS pak můžete určit tato nová písma podle jména u libovolného prvku, který chcete použít.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Místo propojení s CSS můžete použít JavaScript FontLoader. Má výhody, jako je ovládání Flash of Unstyled Text (FOUT), a také nevýhody, jako je skutečnost, že se písma nebudou načítat uživatelům s vypnutým JavaScriptem.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Tyto názvy tříd, např. .wf-loadingPoužijí se na prvek. Všimněte si, že když se písma „načítají“, můžete použít tento název třídy ke skrytí textu. Jakmile se zobrazí, znovu je zviditelněte. Tak se ovládá FOUT.