Tenga en cuenta que mi respuesta ha envejecido mucho.
Hay otras respuestas más sofisticadas técnicamente a continuación, por ejemplo:
así que no dejes que el hecho de que esta sea la respuesta aceptada actualmente te dé la impresión de que sigue siendo la mejor.
Ahora también puede descargar todo el conjunto de fuentes de google a través de github en su repositorio de google / font . También proporcionan una instantánea zip ~ 420MB de sus fuentes .
Primero descarga su selección de fuente como un paquete comprimido, que le proporciona un montón de fuentes de tipo verdadero. Cópielos en algún lugar público, en algún lugar al que pueda vincular desde su CSS.
En la página de descarga de google webfont, encontrará un enlace de inclusión como este:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
Se vincula a un CSS que define las fuentes a través de un montón de @font-face
definiciones.
Ábralo en un navegador para copiarlos y pegarlos en su propio CSS y modifique las URL para incluir el archivo de fuente y los tipos de formato correctos.
Así que esto:
@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');
}
se convierte en esto:
/* 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');
}
Como puede ver, una desventaja de alojar las fuentes en su propio sistema de esta manera es que se restringe al formato de tipo verdadero, mientras que el servicio google webfont determina por el dispositivo de acceso qué formatos se transmitirán.
Además, tuve que agregar un .htaccess
archivo a mi directorio que contenía las fuentes que contenían tipos MIME para evitar que aparecieran errores en Chrome Dev Tools.
Para esta solución, solo se necesita el tipo verdadero, pero definir más no hace daño cuando también desea incluir diferentes fuentes, como font-awesome
.
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff