Osnove API-ja Google Font - CSS-trikovi

Veza do CSS datoteka

U osnovi imate hitnu vezu izravno do CSS datoteka na Google.com. Kroz parametre URL-a određujete koje fontove želite i koje varijacije tih fontova.

… 

Ideja: Možete izbjeći dodatni mrežni zahtjev otvaranjem tog lista stilova i kopiranjem i lijepljenjem @ font-face stvari u svoj glavni tabelu stilova. Ali pripazite: Google radi njuškanje nekih stvari kako bi ponekad poslužio različite stvari različitim uređajima po potrebi. Ako to učinite na ovaj način, nećete imati koristi od toga.

CSS

Zatim u svom CSS-u možete navesti nove fontove po imenu na bilo kojem elementu koji želite koristiti.

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

FontLoader

Umjesto povezivanja s CSS-om možete koristiti JavaScript FontLoader. Ima prednosti, poput upravljanja bljeskom nestilnog teksta (FOUT), a također i nedostatke, poput činjenice da se fontovi neće učitati za korisnike s isključenim JavaScriptom.

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

Ta imena klasa, npr .wf-loading. Primjenjuju se na element. Dakle, primijetite kad se fontovi "učitavaju", možete koristiti taj naziv klase da biste sakrili tekst. Zatim, kad se prikažu, učinite ih opet vidljivima. Tako se kontrolira FOUT.