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

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?

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

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 .

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

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!

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

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:

• Plugin de paquete web de fuentes de Google
• Fuentes de Google sin conexión
• Fuentes de Google
• Obtén fuentes de Google

Lectura adicional :

• ¿Cómo alojar íconos de material fuera de línea?
• Uso de iconos de material sin conexión y fuente Roboto en la aplicación Electron

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

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.

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.

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.

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