Noțiuni de bază despre Google Font API - CSS-Tricks

Link către fișiere CSS

În esență, vă conectați direct la fișiere CSS de pe Google.com. Prin parametrii URL, specificați ce fonturi doriți și ce variații ale acestor fonturi.

… 

Idee: puteți evita o solicitare suplimentară de rețea deschizând foaia de stil respectivă și copiați și lipiți elementele @ font-face în foaia de stil principală. Dar, atenție: Google face ceva agent de utilizator care adulmecă lucruri pentru a servi uneori lucruri diferite pe diferite dispozitive, după cum este necesar. Nu veți beneficia de asta dacă faceți acest lucru.

CSS

În CSS puteți specifica aceste noi fonturi după nume pe orice element pe care doriți să le utilizați.

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

FontLoader

Puteți utiliza JavaScript FontLoader în loc să faceți legătura cu CSS. Are avantaje, cum ar fi controlul blițului de text nestilizat (FOUT) și, de asemenea, dezavantaje, cum ar fi faptul că fonturile nu se vor încărca pentru utilizatorii cu JavaScript dezactivat.

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

Aceste nume de clase, de exemplu, .wf-loadingse aplică elementului. Așadar, observați când fonturile se „încarcă”, puteți folosi numele clasei respective pentru a ascunde textul. Apoi, când sunt afișate, faceți-le din nou vizibile. Acesta este modul în care FOUT este controlat.