Caricamento font in Ruby on Rails progetto prendendo troppo tempo

Question

Sono in un progetto Rails e sto usando due caratteri che si trovano nella cartella di /assets/fonts.

@font-face { 
    font-family: FuturaStd-Light; 
    src: url("/assets/fonts/FuturaStd-Light.otf"); 
} 

@font-face { 
    font-family: HelveticaNeue; 
    src: url("/assets/fonts//HelveticaNeue.dfont"); 
} 

I caratteri sono file molto grandi (in particolare il secondo) e richiedono sempre un tempo per caricarli. E in ogni pagina il testo appare dopo tutto il resto.

C'è un modo migliore per caricare i font? C'è un modo per memorizzarli? Qualche idea?

Answer 1

@ font-face è una tecnica meravigliosa, ma di grandi file di font sarà sicuramente rallentare il sito. Ci sono molte tecniche che è possibile utilizzare per combattere questo:

• utilizzare un servizio font-hosting come google fonts o typekit
• ospitare i vostri file dei font su un CDN
• ottimizzare i file dei font utilizzando un servizio come fontsquirrel

Una cosa in particolare da tenere d'occhio è che IE bloccherà il rendering dell'intera pagina se c'è un elemento SCRIPT prima del foglio di stile. Quindi, assicurarsi che tutti i link fogli di stile sono al di sopra qualsiasi file JavaScript si sta caricando.

Ulteriori approfondimenti:

• Web Font Performance: Weighing @font-face Options and Alternatives
• @font-face and performance
• fighting the FOUT

Answer 2

Sono d'accordo con Scott, @ font-face può rallentare il sito e così a seconda dei tuoi obiettivi si può vuoi andare con google font, typekit o un altro provider di font online. Per un progetto al momento sto lavorando su Ho scelto i caratteri di Google. Tutto quello che dovete fare è aggiungere i font web snippet di Google al vostro al vostro applications.html.erb:

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'> 

E poi aggiungerlo al file CSS:

h1 { 
    font-family: "PT Sans", Arial, Helvetica, sans-serif; 
}