personalizadas para importar google fuentes fuente font ejemplo descargar agregar fonts google-font-api
instantánea zip de ~ 360MB de sus fuentes

para - google fonts



¿Cómo alojar fuentes web de google en mi propio servidor? (16)

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.

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.

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.

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

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.

Existe un script muy simple, escrito en Java simple, para descargar todas las fuentes desde un enlace de fuente web de Google (se admiten múltiples fuentes). También descarga el archivo CSS y lo adapta a los archivos locales. El agente de usuario se puede adaptar para obtener también otros archivos además de WOFF2. Consulte https://github.com/ssc-hrep3/google-font-download

Los archivos resultantes se pueden agregar fácilmente a un proceso de compilación (por ejemplo, una compilación de webpack como vue-webpack ).

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

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

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 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

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.

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''

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

Utilicé grunt-local-googlefont en una tarea grunt.

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(''package.json''), "local-googlefont" : { "opensans" : { "options" : { "family" : "Open Sans", "sizes" : [ 300, 400, 600 ], "userAgents" : [ "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)", //download eot "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2 ], "cssDestination" : "build/fonts/css", "fontDestination" : "build/fonts", "styleSheetExtension" : "css", "fontDestinationCssPrefix" : "fonts" } } } }); grunt.loadNpmTasks(''grunt-local-googlefont''); };

Luego, para recuperarlos:

grunt local-googlefont:opensans

Tenga en cuenta que estoy usando un fork del original, que funciona mejor cuando se recuperan fuentes con espacios en blanco en sus nombres.

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