fonts agregar - ¿Cómo alojar fuentes web de google en mi propio servidor?




html @font-face (14)

Necesito usar algunas fuentes de Google en una aplicación de intranet. Los clientes pueden o no tener conexión a internet. Leyendo los términos de la licencia, parece que está legalmente permitido.


Answers

La gran solución es google-webfonts-helper .

Le permite seleccionar más de una variante de fuente, lo que ahorra mucho tiempo.



Además de k0pernicus, me gustaría sugerir el best-served-local . También es un script de bash (v4) que permite a los operadores de servidores web descargar y servir las fuentes web de Google desde su propio servidor web. Pero además de la otra secuencia de comandos bash, permite al usuario automatizar completamente (a través de cron y demás) el servicio de archivos de fuentes y archivos css actualizados.


El contenido del archivo CSS (de la URL de inclusión) depende del navegador desde el cual lo veo. Por ejemplo, al navegar a http://fonts.googleapis.com/css?family=Open+Sans usando Chrome, el archivo solo contenía enlaces WOFF. Usando Internet Explorer (abajo), incluía tanto EOT como WOFF. He pegado todos los enlaces en mi navegador para descargarlos.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Cuando aloje sus propias fuentes web, debe vincular correctamente a cada tipo de fuente , lidiar con errores heredados del navegador, etc. Cuando use Google Web Fonts (hospedado por Google), Google se vincula automáticamente a los tipos de fuente correctos para ese navegador.


Si está utilizando Webpack, podría estar interesado en este proyecto: https://github.com/KyleAMathews/typefaces

Por ejemplo, digamos que quieres usar la fuente Roboto:

npm install typeface-roboto --save

Luego simplemente impórtelo en el punto de entrada de su aplicación (archivo principal js):

import 'typeface-roboto'

Por favor, tenga en cuenta que mi respuesta ha envejecido mucho.

Hay otras respuestas más sofisticadas técnicamente a continuación, por ejemplo:

  • localfont
  • neverpanic/google-font-download
  • google-webfont-helper

así que no dejes que el hecho de que esta es la respuesta actualmente aceptada 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 de ~ 360MB de sus fuentes .

Primero descarga su selección de fuente como un paquete comprimido, proporcionándole un montón de fuentes de tipo verdadero. Cópialos en algún lugar público, en algún lugar al que puedas enlazar desde tu css.

En la página de descarga de google webfont, encontrará un enlace de inclusión como:

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 definiciones de @font-face .

Ábralo en un navegador para copiarlos y pegarlos en su propio CSS y modifique las direcciones URL para incluir el tipo de archivo y el tipo de fuente adecuados.

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 usted se limita al formato de tipo verdadero, mientras que el servicio de google webfont determina en qué dispositivos de acceso se transmitirán los formatos.

Además, tuve que agregar un archivo .htaccess a mi directorio que contiene las fuentes que contienen tipos mime para evitar que aparezcan errores en las herramientas de desarrollo de Chrome.

Para esta solución, solo se necesita el tipo verdadero, pero la definición de más no hace daño cuando también se quieren incluir diferentes fuentes, como la font-awesome .

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Puede descargar todas las variantes de formato de fuente directamente desde Google e incluirlas en su css para servir desde su servidor. De esa manera, no tiene que preocuparse por el seguimiento de Google de los usuarios de su sitio. Sin embargo, la desventaja puede ralentizar su propia velocidad de servicio. Las fuentes son bastante exigentes en recursos. No he realizado ninguna prueba en este tema todavía, y me pregunto si alguien tiene pensamientos similares.


Hay una herramienta localfont.com para ayudarlo a descargar todas las variantes de fuentes. También genera el correspondiente CSS para su implementación. obsoleto

localfont está abajo. En cambio, como sugiere Damir , puedes usar google-webfonts-helper


Tengo un script escrito en PHP similar al de @neverpanic que descarga automáticamente tanto el CSS como las fuentes ( tanto insinuadas como no impresas ) de Google. Luego sirve el CSS correcto y las fuentes de su propio servidor basado en el Agente de usuario. Mantiene su propio caché, por lo que las fuentes y CSS de un agente de usuario solo se descargarán una vez.

Está en una etapa prematura, pero se puede encontrar aquí: DaAwesomeP / php-offline-fonts



Escribí un script de bash que busca el archivo CSS en los servidores de Google con diferentes agentes de usuario, descarga los diferentes formatos de fuente a un directorio local y escribe un archivo CSS que los incluye. Tenga en cuenta que la secuencia de comandos necesita Bash versión 4.x.

Consulte https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ para ver el script (no lo estoy reproduciendo aquí, así que solo tengo que actualizarlo en un lugar cuando lo necesito).

Edición: Se mudó a https://github.com/neverpanic/google-font-download


Puede descargar fuentes de origen desde https://github.com/google/fonts

Luego, use la herramienta font-ranger para dividir su fuente grande de Unicode en múltiples subconjuntos (por ejemplo, latín, cirílico). Debes hacer lo siguiente con la herramienta:

  • Generar subconjuntos para cada idioma que soporte
  • Use un subconjunto de rango Unicode para ahorrar ancho de banda
  • Elimina la hinchazón de tus fuentes y optimízalas para la web.
  • Convierte tus fuentes a un formato comprimido de woff2
  • Proporcionar .woff respaldo para navegadores antiguos
  • Personaliza la carga y el renderizado de fuentes.
  • Genera un archivo CSS con las reglas de @ font-face
  • Auto-alojar fuentes web o usarlas localmente

Font-Ranger : npmjs.com/package/font-ranger

PS También puedes automatizar esto usando la API Node.js


Está legalmente permitido siempre y cuando cumpla con los términos de la licencia de la fuente, generalmente la OFL.

Necesitará un conjunto de formatos de fuentes web, y el generador de fuentes de fuente de ardilla de fuentes puede producirlos.

Pero la OFL requería que las fuentes fueran renombradas si se modificaban, y usar el generador significa modificarlas.


También es posible usar fuentes WOFF - ejemplo here

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }






fonts google-font-api