Nozioni di base sull'API di Google Font - Trucchi CSS

Collegamento a file CSS

In sostanza, fai un collegamento diretto ai file CSS su Google.com. Attraverso i parametri URL, puoi specificare quali caratteri desideri e quali varianti di tali caratteri.

… 

Idea: puoi evitare una richiesta di rete aggiuntiva aprendo quel foglio di stile e copiando e incollando l'elemento @ font-face nel tuo foglio di stile principale. Ma attenzione: Google fa alcune cose di sniffing dello User Agent per a volte servire cose diverse su dispositivi diversi secondo necessità. Non ne trarrai beneficio se fatto in questo modo.

CSS

Nel tuo CSS puoi quindi specificare questi nuovi caratteri per nome su qualsiasi elemento che desideri usarli.

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

FontLoader

Puoi utilizzare il JavaScript FontLoader invece di collegarti al CSS. Presenta vantaggi, come il controllo del Flash of Unstyled Text (FOUT), e anche svantaggi, come il fatto che i caratteri non verranno caricati per gli utenti con JavaScript disattivato.

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

Quei nomi di classe, ad esempio, .wf-loadingvengono applicati all'elemento. Quindi nota quando i caratteri stanno "caricando", puoi usare quel nome di classe per nascondere il testo. Quindi, quando vengono visualizzati, renderli nuovamente visibili. Ecco come viene controllato FOUT.