Basisprincipes van Google Font API - CSS-trucs

Link naar CSS-bestanden

U hotlinkt in wezen rechtstreeks naar CSS-bestanden op Google.com. Door middel van URL-parameters geeft u aan welke lettertypen u wilt en welke varianten van die lettertypen.

… 

Idee: U kunt een extra netwerkverzoek vermijden door dat stylesheet te openen en het @ font-face-materiaal in uw hoofdstijlblad te kopiëren en te plakken. Maar pas op: Google snuffelt wat User Agent-dingen om soms verschillende dingen aan verschillende apparaten te serveren als dat nodig is. Op deze manier profiteert u daar niet van.

CSS

In uw CSS kunt u deze nieuwe lettertypen vervolgens op naam specificeren op elk element dat u ze wilt gebruiken.

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

FontLoader

U kunt de FontLoader JavaScript gebruiken in plaats van te linken naar de CSS. Het heeft voordelen, zoals het besturen van de Flash of Unstyled Text (FOUT), en ook nadelen, zoals het feit dat de lettertypen niet worden geladen voor gebruikers met JavaScript uitgeschakeld.

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

Die klassenamen worden bijvoorbeeld .wf-loadingtoegepast op het element. Merk dus op dat wanneer de lettertypen worden "geladen", u die klassenaam kunt gebruiken om de tekst te verbergen. Maak ze vervolgens weer zichtbaar als ze worden getoond. Dat is hoe FOUT wordt bestuurd.