css - otf - Descargar una fuente de Google y configurar un sitio sin conexión que lo use

google fonts

Question

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 utilizar en mis páginas que se ejecutan sin conexión todo el tiempo?

Answer 1

3 pasos:

1. Descargue su fuente personalizada en Goole Fonts y descargue el archivo .css ex: descargue fonts.googleapis.com/… y guárdelo como example.css
2. Abra el archivo que descarga ( example.css ). Ahora debe descargar todo el archivo de fuente y guardarlo 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 contengan el archivo .css Espero que te ayude

Answer 2

Al usar Google Fonts, su flujo de trabajo se divide en 3 pasos: "Elegir", "Revisar", "Usar". Si miras de cerca, en el extremo derecho de la página "Usar", hay una pequeña flecha que te permite descargar la fuente que está actualmente en tu 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 regular usando la directiva CSS de la font-family .

Answer 3

Debe descargar la fuente y hacer referencia a ella localmente.

Descargue el CSS del enlace que publicó, luego descargue todos los archivos WOFF y (si es necesario) TTF a TTF .

Luego, cambie el CSS del enlace 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 haya algo más que deba hacer, pero lo anterior es lo básico. Este artículo explica un poco mejor.

Answer 4

Eche un vistazo a este útil artículo para explicar cómo usar las fuentes de Google sin conexión

Básicamente, estás incluyendo la fuente en tu 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'');

Answer 5

Encontré una forma paso a paso para lograr esto (para 1 fuente):
( desde sep-9 2013 )

1. Elija su fuente en http://www.google.com/fonts
2. Agregue el deseado a su colección con 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 podría necesitar, como "negrita" ...
4. Haga clic en el botón de la 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. Desplaza lentamente la página hasta que veas las 3 pestañas "Standrd | @import | Javascript"
9. Haga clic en la pestaña "@import"
10. Selecciona y copia la url entre ''url('' y '')''
11. Cópialo en la barra de direcciones en una nueva pestaña e ir allí
12. Haga "Archivo> Guardar página como ..." y asígnele el nombre "nombredefunción.css" (reemplace en consecuencia)
13. Descomprime el archivo .zip de fuentes que descargaste (.ttf debería ser extraído)
14. Vaya a " http://ttf2woff.com/ " y convierta cualquier .ttf extraído de zip en .woff
15. Edite el nombre de desiredfontname.css y reemplace cualquier url dentro de él [entre ''url('' y '')'' ] con el correspondiente archivo .woff convertido 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 en su lugar final y escriba la correspondiente etiqueta <link/> CSS para importarlos en su página HTML
17. A partir de ahora, consulte esta fuente por su nombre de font-family en sus estilos

Eso es. Porque tuve el mismo problema y la solución en la parte superior no funcionó para mí.

Answer 6

Las otras respuestas no son incorrectas, pero encontré que esta es la manera más rápida.

1. Descargue el archivo zip de las fuentes de Google y descomprímalo.
2. Suba los archivos de fuentes 3 a la vez a 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 bonificación adicional, también generan el archivo css para ti!

Answer 7

Sé que llego tarde a la fiesta, pero como esta es una de las prioridades de Google: echa un vistazo al ayudante de google webfonts . Le permite descargar todas las fuentes web de Google y sugiere el 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 quiso saber dónde aloja Google sus webfonts? 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 echa un vistazo a su página de Github .

Answer 8

Vaya a Google Fonts - http://www.google.com/fonts/ , agregue la fuente que le gusta 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 cómo usar @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 de la URL al enlace local en el archivo de fuente, que ha descargado.

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

Solo descargue el archivo que 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 fuentes.

Y luego reemplace su cadena de ejemplo con <link href=''opensans.css'' rel=''stylesheet'' type=''text/css''>

Answer 9

respuesta para 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.

Answer 10

solo 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); 
}