fonts - personalizadas - importar fuente css




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

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.


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.



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


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







google-font-api