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

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

 

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

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

Y luego reemplace su cadena de ejemplo con

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

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 tabs “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 fonts 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 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í.

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

  1. Descargue el archivo zip de las fonts de Google y descomprímalo.
  2. Suba los archivos de fonts 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!

3 pasos:

  1. Descargue su fuente personalizada en Goole Fonts y descargue el archivo .css ex: descargue http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic400,600,300 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 fonts .
  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; } 

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.

Captura de pantalla de Google webfonts

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 .

Eche un vistazo a este útil artículo para explicar cómo usar las fonts 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'); 

Seguí la respuesta de duydb 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.

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

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