Descargar una fuente de Google y crear un sitio sin conexión que la utilice

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 descargarla y configurarla para usarla en mis páginas que funcionan sin conexión todo el tiempo?

unor
Pregunta editada 21º mayo 2018 в 1:03
Programación
fonts offline css google-fonts
10º abril 2013 в 3:22
4 vistas

Echa un vistazo a este práctico artículo que explica cómo utilizar 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');
davidb
Respuesta editada 10º abril 2013 в 3:50
Comentarios (1)

Al utilizar Google Fonts, su flujo de trabajo se divide en 3 pasos: "Seleccionar", "Personalizar", "Incrustar". Si te fijas bien, en el extremo derecho de la página "Usar", hay una pequeña flecha que te permite descargar la fuente que tienes actualmente en tu colección.

Después, y una vez instalada la fuente en tu sistema, sólo tienes que usarla como cualquier otra fuente normal usando la directiva CSS font-family.

KyleMit
Respuesta editada 25º noviembre 2018 в 2:52
Comentarios (0)

Debe descargar la fuente y referenciarla localmente.

Descarga el CSS del enlace que has puesto, luego descarga todos los archivos WOFF y (si es necesario) conviértelos a TTF.

A continuación, cambie el CSS desde el enlace que has publicado para incluir las fuentes a nivel local.

Desde

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

A

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

¡Voilà! Puede que necesites hacer algo más, pero lo anterior es lo básico. Este artículo explica un poco mejor.

Comentarios (3)