Compreso il collegamento o l'importazione di Google Web Fonts?

190

Qual è il modo preferito di includere Google Web Fonts in una pagina?

tramite il tag link?

<link href = 'http: //fonts.googleapis.com/css? family = Judson: 400.400italic, 700' rel = 'stylesheet' type = 'text / css'>

tramite importazione in un foglio di stile?

@import url (http://fonts.googleapis.com/css?family=Kameron:400.700);

o usa il caricatore di font web

https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

— Kajo
fonte

Potresti anche voler leggere questa domanda prima di utilizzare Google Fonts. a seconda del progetto specifico, potrebbe non essere sempre la scelta intelligente.

— Obmerk Kronen,

Risposte:

285

Per il 90% + dei casi è probabile che tu voglia il <link>tag. Come regola empirica, vuoi evitare le @importregole perché rimandano il caricamento della risorsa inclusa fino a quando il file non viene recuperato .. e se hai un processo di compilazione che "appiattisce" le @ import, allora crei un altro problema con i font web : provider dinamici come Google WebFonts offrono versioni dei caratteri specifiche della piattaforma, quindi se semplicemente incorpori il contenuto, finirai con caratteri spezzati su alcune piattaforme.

Ora, perché dovresti usare il caricatore di font web? Se hai bisogno di un controllo completo su come vengono caricati i caratteri. La maggior parte dei browser rinvia a dipingere il contenuto sullo schermo fino a quando tutto il CSS non viene scaricato e applicato - questo evita il problema "flash of content nonstyled". Il rovescio della medaglia è ... potresti avere una pausa in più e un ritardo fino a quando il contenuto è visibile. Con il caricatore JS, puoi definire come e quando i caratteri diventano visibili. Ad esempio, puoi persino sfumarli dopo che il contenuto originale è stato dipinto sullo schermo.

Ancora una volta, il caso del 90% è il <link>tag: usa un buon CDN e i caratteri scenderanno rapidamente e ancor più probabilmente, saranno serviti dalla cache.

Per ulteriori informazioni e uno sguardo approfondito a Google Web Fonts, guarda questo video GDL

— igrigorik
fonte

"perché rimandano il caricamento della risorsa inclusa fino a quando il file non viene recuperato" - non è un buon motivo per usare @import? Perché normalmente non vuoi vedere il contenuto fino a quando il carattere non è stato caricato (per evitare lo sfarfallio del carattere)

— Alex

L'API Web Fonts è molto utile quando si lavora con HTML5 Canvas. Non è possibile utilizzare un carattere che non ha terminato il caricamento prima di disegnare del testo con esso, e ovviamente una volta caricato il carattere non viene aggiornato automaticamente. Analogamente, l'API è necessaria per tenere traccia dell'avanzamento del caricamento delle risorse, ad esempio in un gioco.

— rvighne,

Queste informazioni dovrebbero essere sulla pagina dei caratteri Web di Google. Ti presenta solo le tre opzioni e non fornisce alcun suggerimento utile su quale utilizzare e quando.

— Gal

Il tutorial di Google " Guida introduttiva " utilizza solo il <link>metodo, quindi immagino che sia quello che raccomandano in modo non detto

— James Cushing,

Potresti voler aggiungere anche rel="preload"al <link>tag, perché il carattere verrà caricato prima che appaia il testo. Vedi 3perf.com/blog/link-rels

— Elijah Mock il

Usa quello <link>fornito da Google perché c'è il controllo delle versioni sul carattere, ma proprio sopra usa la funzione di preconnessione HTML5 per chiedere ai browser di aprire una connessione TCP e negoziare SSL in anticipo con fonts.gstatic.com. Ecco un esempio, che ovviamente deve risiedere nel <head></head>tag:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

— Mark Cilia Vincenti
fonte

È corretto che la preconnessione sia un dominio completamente diverso rispetto al collegamento del foglio di stile nel tuo esempio? fonts.gstatic.comcontrofonts.googleapis.com

— BadHorsie il

@BadHorsie è tutto questo. Il foglio di stile su fonts.googleapis.com ha un collegamento a una risorsa su fonts.gstatic.com. Stai dicendo al browser di avviare una connessione a quest'ultimo host in modo che si sarebbe connessa o abbia iniziato a connettersi nel momento in cui trova il collegamento nel foglio di stile.

— Mark Cilia Vincenti,

Se sei preoccupato per la SEO (Search Engine Optimization) e le prestazioni, è bene usare il <link>tag perché può precaricare il font.

Esempio:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Per maggiori informazioni leggi questo: https://ashton.codes/preload-google-fonts-using-resource-hints/

— aragosta
fonte