Grunderna för Google Font API - CSS-tricks

Länk till CSS-filer

Du länkar i huvudsak direkt till CSS-filer på Google.com. Genom URL-parametrar specificerar du vilka typsnitt du vill ha och vilka variationer av dessa typsnitt.

… 

Idé: Du kan undvika en extra nätverksförfrågan genom att öppna det formatmallen och kopiera och klistra in @ font-face-saker i ditt huvudformat. Men se upp: Google gör vissa User Agent-sniffar för att ibland servera olika saker till olika enheter efter behov. Du kommer inte dra nytta av det om du gör det på detta sätt.

CSS

I din CSS kan du sedan ange dessa nya typsnitt med namn på vilket element du vill använda dem.

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

FontLoader

Du kan använda JavaScript för FontLoader istället för att länka till CSS. Det har fördelar, som att kontrollera Flash of Unstyled Text (FOUT), och även nackdelar, som det faktum att teckensnitt inte laddas för användare med JavaScript av.

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

Dessa klassnamn, t.ex. .wf-loadingappliceras på elementet. Lägg märke till att när teckensnitten "laddas" kan du använda det klassnamnet för att dölja texten. När de visas, gör dem sedan synliga igen. Det är så FOUT styrs.