Descargar una fuente de Google y configurar un sitio fuera de línea que la use


139

Tengo una plantilla y tiene una referencia a una fuente de Google como esta:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

¿Cómo puedo descargarlo y configurarlo para usarlo en mis páginas que se ejecutan sin conexión todo el tiempo?

Respuestas:


101

Simplemente vaya a Google Fonts - http://www.google.com/fonts/ , agregue la fuente que desee a su colección y presione el botón de descarga. Y luego simplemente use @fontface para conectar esta fuente a su página web. Por cierto, si abre el enlace que está utilizando, verá un ejemplo de uso de @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Para un ejemplo

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Simplemente cambie la dirección URL al enlace local en el archivo de fuente que ha descargado.

Puedes hacerlo aún más fácil.

Simplemente descargue el archivo, ha vinculado:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Nómbrelo opensans.css más o menos.

Luego simplemente cambie los enlaces en url () a su ruta a los archivos de fuente.

Y luego reemplace su cadena de ejemplo con:

<link href='opensans.css' rel='stylesheet' type='text/css'>

8
Todavía no lo entendí
user2147954

22
A diferencia de las fuentes de Google cuando el servidor de Google, este enfoque se basa únicamente en el formato WOFF y, por lo tanto, es esencialmente más limitado. Además, Google distribuye sus fuentes en formato TTF, no WOFF.
Jukka K. Korpela

24
Tenga cuidado, fonts.googleapis genera diferentes declaraciones @ font-face para diferentes navegadores.
Hüseyin Yağlı

77
Esto NO es correcto porque Google envía un archivo CSS específico del navegador desde fonts.googleapis.com/… Entonces, si abre esto con Chrome, obtendría una @ font-face diferente de abrirlo con IE o cualquier otro navegador. Las fuentes WOFF2, por ejemplo, solo se enviarán a Firefox y Chrome, ya que otros navegadores no las admiten (todavía). caniuse.com/#feat=woff2
Joost van der Laan

44
Ignore esta respuesta independientemente del estado aceptado. Es incorrecto como ha señalado Joost van der Laan aquí. Vea la respuesta de alto puntaje de @ marco-kerwitz a continuación, que debe marcarse como la respuesta correcta.
Appurist - Paul W

324

Mira el ayudante de google webfonts

Le permite descargar todas las fuentes web de Google y sugiere un código CSS para la implementación. Esta herramienta también le permite simplemente descargar todos los formatos a la vez sin la molestia.

¿Alguna vez quisiste saber dónde aloja Google sus fuentes web? Este servicio puede ser útil si desea descargar todos los archivos .eot, .woff, .woff2, .svg, .ttf de una variante de fuente directamente desde google (normalmente su User-Agent determinaría el mejor formato).

También eche un vistazo a su página de Github .


20
Solo me pregunto por qué Google no ha hecho esto en primer lugar. +1
tftd

3
Esto funciona muy bien, asegúrese de declarar el tipo de contenido respectivo al vincular desde un archivo localContent-type: text/css; charset: UTF-8
Clain Dsilva

Si está utilizando webpack o alguna otra herramienta que empaca importaciones CSS / SASS, entonces este enfoque es el mejor. Esta pregunta describe el proceso con un poco más de detalle.
Pace

Muchas gracias por la pista. Me salvó el día!
evnica

1
one-liner , ejecute en el directorio de destino:curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip
smnbbrv

43

Encontré una forma paso a paso para lograr esto (para 1 fuente):
(a partir del 9 de septiembre de 2013 )

  1. Elija su fuente en http://www.google.com/fonts
  2. Agregue el deseado a su colección usando el botón azul "Agregar a la colección"
  3. Haga clic en el botón "Ver todos los estilos" cerca del botón "Eliminar de la colección" y asegúrese de haber seleccionado otros estilos que también pueda necesitar, como 'negrita' ...
  4. Haga clic en el botón de pestaña 'Usar' en la parte inferior derecha de la página
  5. Haga clic en el botón de descarga en la parte superior con una imagen de flecha hacia abajo
  6. Haga clic en "archivo zip" en el mensaje emergente que aparece
  7. Haga clic en el botón "Cerrar" en la ventana emergente
  8. Desplace lentamente la página hasta que vea las 3 pestañas "Standrd | @import | Javascript"
  9. Haga clic en la pestaña "@import"
  10. Seleccione y copie la url entre 'url('y')'
  11. Cópielo en la barra de direcciones en una nueva pestaña y vaya allí
  12. Haga "Archivo> Guardar página como ..." y asígnele el nombre "nombre de fuente deseado.css" (reemplácelo en consecuencia)
  13. Descomprima el archivo .zip de fuentes que descargó (se debe extraer .ttf)
  14. Vaya a " http://ttf2woff.com/ " y convierta cualquier archivo .ttf extraído de zip a .woff
  15. Edite desiredfontname.cssy reemplace cualquier url dentro de ella [entre 'url('y ')'] con el archivo .woff convertido correspondiente que obtuvo en ttf2woff.com; la ruta que escriba debe estar de acuerdo con su servidor doc_root
  16. Guarde el archivo y muévalo a su lugar final y escriba la <link/>etiqueta CSS correspondiente para importarlos en su página HTML
  17. A partir de ahora, consulte esta fuente por su font-familynombre en sus estilos

Eso es. Porque tuve el mismo problema y la solución de arriba no me funcionó.


1
Estos pasos funcionaron perfectamente. Solo quiero agregar eso para aquellos que aún no usan extensiones de archivo woff para asegurarme y agregar ese tipo MIME en web.config.
Codificación101

1
No se necesita convertidor. Mira la respuesta de Marco Kerwitz.
Herr_Schwabullek

25

Las otras respuestas no son incorrectas, pero descubrí que esta es la forma más rápida.

  1. Descargue el archivo zip de las fuentes de Google y descomprímalo.
  2. Cargue los archivos de fuente 3 a la vez en http://www.fontsquirrel.com/tools/webfont-generator
  3. Descargue los resultados.

Los resultados contienen todos los formatos de fuente: woff, svg, ttf, eot .

Y como una ventaja adicional, ¡también generan el archivo CSS para usted!


+1 para una respuesta en la que no tuve que pensar mientras lo leía. Sería increíble encontrar un convertidor directo de fuentes de Google sin tener que subirlos previamente. Utilidad de ejemplo: al hacer la gestión de sitios web fuera de línea.
Meetai.com

Es muy conveniente tener los diferentes formatos de fuente generados para usted. Pero cualquiera que lo use tenga en cuenta que el css generado no es muy inteligente, generará dos (o más) estilos de la misma fuente como familias de fuentes separadas, en lugar de una familia de fuentes con diferentes pesos de fuente. Pero es bastante fácil arreglarlo usted mismo en el CSS.
Ken Sung

2
No se necesita convertidor. Mire la respuesta de Marco Kerwitz
Herr_Schwabullek

Pude subir 10 fuentes de una vez, así que parece que la limitación de 3 fuentes se ha eliminado o aumentado
Adrian Hedley

4

3 pasos:

  1. Descargue su fuente personalizada en Goole Fonts y descargue el archivo .css, por ejemplo: descargue http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 y guárdelo como example.css
  2. Abra el archivo que descargue ( ejemplo.css ). Ahora debe descargar todos los archivos de fuente y guardarlos en el directorio de fuentes .
  3. Edite example.css : reemplace todo el archivo font-face a su descarga .css

Ex:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Mira src: -> url. Descargue http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 y guárdelo en el directorio de fuentes . Después de eso, cambie la URL a todo su archivo descargado. Ahora se verá como

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** Descargar todas las fuentes que contienen el archivo .css Espero que te ayude


4

Si desea declarar explícitamente las dependencias de su paquete o automatizar la descarga, puede agregar un paquete de nodos para obtener las fuentes de Google y servir localmente.

npm - Descarga de fuentes de Google s

El proyecto de tipos de letra crea paquetes NPM para tipos de letra de código abierto:

Cada paquete se envía con todos los fons y css necesarios para alojar un tipo de letra de código abierto.
Se han agregado todas las fuentes de Google, así como una pequeña pero creciente lista de otras fuentes de código abierto.

Simplemente busque npm para buscar las fuentes disponibles como typeface-roboto o typeface-open-sans e instálelo así:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

NPM - Fuentes de Google Download- ERS

Para el caso de uso más genérico, hay varios paquetes npm que entregarán fuentes en dos pasos, primero obteniendo el paquete y luego apuntándolo al nombre de la fuente y las opciones que desea incluir.

Estas son algunas de las opciones:

Lectura adicional :


3

Esencialmente está incluyendo la fuente en su proyecto.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

enlace muerto al artículo
TecHunter

La descarga no incluye el archivo .eot
exe

2

Al usar Google Fonts, su flujo de trabajo se divide en 3 pasos: "Seleccionar", "Personalizar", "Incrustar". Si observa detenidamente, en el extremo derecho de la página "Usar", hay una pequeña flecha que le permite descargar la fuente que está actualmente en su colección.

Después de eso, y una vez que la fuente esté instalada en su sistema, solo tiene que usarla como cualquier otra fuente normal usando la font-familydirectiva CSS.


0

He seguido de duydb respuesta a producir el código Python a continuación que automatiza este proceso.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Espero que esto ayude con algo de la muerte de copiar y pegar.


-1

Necesita descargar la fuente y hacer referencia localmente.

Descargue el archivo CSSdesde el enlace que publicó, luego descargue todos los WOFFarchivos y (si es necesario) conviértalos TTF.

Luego cambie el CSSenlace que publicó para incluir las fuentes localmente.

De

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

A

url(/path/to/font/font.woff)

Voila! Es posible que deba hacer algo más, pero lo anterior es lo básico. Este artículo explica un poco mejor.


HIZO lo mismo pero otras páginas se distorsionan. : <link href = "./ css / font.woff" rel = 'stylesheet' type = 'text / css'>
user2147954

¿Se llama su archivo de fuente font.woff? ¿Verificaste que el archivo está cargado?
Terry

@Terry No estoy seguro de lo que quieres decir: ese era un nombre ficticio para el archivo.
Mattios550

-3

simplemente descargue la fuente y extráigala en una carpeta. luego vincula esa fuente. El siguiente código funcionó para mí correctamente.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.