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