Come posso caricare un carattere Web come font fantastico al caricamento della pagina?

Question

Questa domanda si applica a situazioni in cui il tipo di carattere web non è richiesta nella pagina principale ed è inizialmente all'interno di una serie di divdisplay:none;

Ho una pagina web che carica una forma nascosta tramite Javascript al clic e questa forma usi un font web. Il mio problema è che c'è un ritardo di un secondo quando l'utente fa clic per rivelare il modulo, poiché in quel momento Chrome scarica il file woff2.

Questo non è molto bello per l'esperienza dell'utente.

Ho bisogno di precaricare il webfont in quanto non ho alcun utilizzo per il carattere nella pagina principale, quindi non c'è niente che causi il recupero del file woff2 da parte di Chrome prima che gli utenti facciano clic per rivelare il modulo nascosto.

Ho notato che questo non importa se stai ospitando il Font Awesome sul tuo server o utilizzando la CDN.

Mi sono guardato su Internet per vedere cosa si poteva fare, ho provato tutto il seguito e niente di tutto questo ha aiutato, niente ha causato il caricamento del file woff2 al caricamento della pagina, è stato caricato sempre solo quando la pagina web aveva bisogno attivamente del font.

Tentativo 1: precarico

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2"> 

o

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font"> 

Tentativo 2: Prefetch

<link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2"> 

Tentativo 3: CSS

@font-face { 
    font-family: 'Font-Awesome'; 
    src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");; 
} 

Come mi stava guardando in giro ho iniziato a vedere le possibili soluzioni con carico basato su JavaScript, cosa che in realtà non volevo andare vicino, così che cosa sono le opzioni qui?

Answer 1

Ho finito con questa semplice soluzione, non è stata testata su qualcosa di diverso da Chrome, ma è piuttosto semplice per il mio caso d'uso, non posso immaginare che non funziona su un browser moderno.

Ho deciso di caricare il file woff2 caricando un carattere nella mia pagina principale, ma assicurandoti che gli utenti non possano vederlo.

Come ho già scoperto, Chrome non recupera risorse necessarie da qualsiasi div che è impostato per display:none;

Così qui è la mia soluzione, invece.

CSS

.div-fake-hidden { 
    width:0px; 
    height:0px; 
    overflow:hidden; 
} 

HTML

<!-- This fake div hidden preloads our web font! --> 
<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div> 

Ora il browser carica la risorsa woff2 al caricamento della pagina, in modo che quando i miei utenti fanno clic su un pulsante per rivelare la forma nascosta, la il carattere Web viene caricato immediatamente.

Answer 2

non hai bisogno di un div nascosto per far funzionare il tuo font. Finché utilizzi un browser supportato (immagine da w3schools) la regola css @font-face dovrebbe funzionare correttamente.

È possibile anche aggiungere ulteriori formati di font come segue:

@font-face { 
font-family: 'Font-Awesome'; 
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2"), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype'); 
} 

Answer 3

Si potrebbe provare a utilizzare Web Font loader: Loader Font https://github.com/typekit/webfontloader

Web dà aggiunto il controllo quando si utilizza caratteri collegati tramite @ font-face. Fornisce un'interfaccia comune per caricare i font indipendentemente dalla sorgente, quindi aggiunge un set standard di eventi che è possibile utilizzare per controllare l'esperienza di caricamento. Il caricatore di caratteri Web è in grado di caricare font da Google Fonts, Typekit, Fonts.com e Fontdeck, oltre a font Web ospitati autonomamente. È co-sviluppato da Google e Typekit.