Tieni presente che la mia risposta è invecchiata molto.
Di seguito sono disponibili altre risposte tecnicamente più sofisticate, ad esempio:
quindi non lasciare che il fatto che questa sia la risposta attualmente accettata ti dia l'impressione che questa sia ancora la migliore.
Ora puoi anche scaricare l'intero set di caratteri di google tramite su github nel loro repository google / font . Forniscono anche un'istantanea zip di ~ 420 MB dei loro caratteri .
Prima devi scaricare la selezione dei caratteri come pacchetto compresso, fornendo così un sacco di caratteri di tipo vero. Copiali da qualche parte pubblici, da qualche parte a cui puoi collegarti dal tuo css.
Nella pagina di download di google webfont troverai un link Includi in questo modo:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
Si collega a un CSS che definisce i caratteri tramite una serie di @font-face
definizioni.
Aprilo in un browser per copiarli e incollarli nel tuo CSS e modificare gli URL per includere il giusto file di font e tipi di formato.
Così questo:
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
diventa questo:
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
Come puoi vedere, un aspetto negativo dell'hosting dei caratteri sul tuo sistema in questo modo è che ti limiti al vero formato del tipo, mentre il servizio webfont di google determina dal dispositivo di accesso quali formati verranno trasmessi.
Inoltre, ho dovuto aggiungere un .htaccess
file alla mia directory contenente i tipi di carattere contenenti i tipi mime per evitare che errori compaiano in Chrome Dev Tools.
Per questa soluzione, è necessario solo il tipo vero, ma definire di più non fa male quando si desidera includere anche caratteri diversi, come font-awesome
.
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff