Grundlæggende om Google Font API - CSS-tricks

Link til CSS-filer

Du linker i det væsentlige direkte til CSS-filer på Google.com. Via URL-parametre specificerer du, hvilke skrifttyper du vil have, og hvilke variationer af disse skrifttyper.

… 

Idé: Du kan undgå en ekstra netværksanmodning ved at åbne dette typografiark og kopiere og indsætte @ font-face-ting i dit hovedformatark. Men pas på: Google laver nogle User Agent-sniffende ting for undertiden at levere forskellige ting til forskellige enheder efter behov. Du vil ikke drage fordel af det, hvis du gør det på denne måde.

CSS

I din CSS kan du derefter specificere disse nye skrifttyper ved navn på ethvert element, du ønsker at bruge dem.

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

FontLoader

Du kan bruge FontLoader JavaScript i stedet for at linke til CSS. Det har fordele, som at kontrollere Flash of Unstyled Text (FOUT), og også ulemper, som det faktum, at skrifttyperne ikke indlæses for brugere med JavaScript slukket.

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

Disse klasse navne, f.eks. .wf-loadingBliver anvendt på elementet. Så bemærk, når skrifttyperne "indlæses", du kan bruge dette klassenavn til at skjule teksten. Så når de vises, skal du gøre dem synlige igen. Sådan styres FOUT.