JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

¿Cómo utilizar las fuentes de Google desde tu propio servidor en vez de desde Google?

Google Fonts es un recurso maravilloso y gratuito para acceder a decenas o centenares de fuentes tipográficas de manera rápida y con rendimiento, ya que además se sirven desde la CDN de Google.

Sin embargo algunas personas prefieren servir las fuentes desde su propio servidor, sin depender de los servidores de Google.

Recomendación: no se me ocurre un caso en el que sea mejor que sirvas las fuentes desde tu servidor en lugar de desde Google. Con toda seguridad las servirá más rápido Google que tu servidor, y además los usuarios puede que la tengan ya cacheada por haber visitado antes otras páginas que también la usan desde la misma ubicación. Salvo que tengas un buen motivo es mejor no usarlas en local.

A pesar de la advertencia anterior y dado que me lo han preguntado, voy a explicar cómo conseguir "gorronear" esas fuentes y utilizarlas desde tu propio servidor o en local.

¡Allá vamos!

1.- Descarga el CSS desde Google

Imagina que la fuente en la que tienes interés es, por ejemplo, Flavors:

Cómo añadir la fuente Flavors en Google Fonts

El código que debes poner en tu página para usar la fuente desde Google es el siguiente:

<link href='https://fonts.googleapis.com/css?family=Flavors' rel='stylesheet'>

Ahora visita la URL de esa hoja de estilos con el navegador, por ejemplo en nuestro caso esta:

https://fonts.googleapis.com/css?family=Flavors

Esto te mostrará en una pestaña el contenido de ese archivo CSS. Cópialo, por ejemplo, a una subcarpeta CSS de la carpeta en la que está tu página y llámale por ejemplo Flavors-Fuente.css.

2.- Obtén el archivo de la fuente

Abre el CSS que acabas de guardar a disco con un editor cualquiera (el mismo bloc de notas te vale). Verás que tiene un simple estilo dentro, este:

@font-face {
font-family: 'Flavors';
font-style: normal;
font-weight: 400;
src: local('Flavors'), local('Flavors-Regular'), url(https://fonts.gstatic.com/s/flavors/v7/FBV2dDrhxqmveJTpXkvvNw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Fíjate en la propiedad src del final. La ubicación de la fuente se indica con url y es, en este caso:

https://fonts.gstatic.com/s/flavors/v7/FBV2dDrhxqmveJTpXkvvNw.woff2

Vete al navegador y escribe esta dirección. Te descargarás la fuente (en formato Woff2 en este caso). Cópiala a una subcarpeta dentro de la carpeta CSS, por ejemplo fuentes y llámale al archivo: "Flavors.woff2".

3.- Cambia la fuente de Google por la "local"

Ahora abre el archivo .css que copiaste y cambia la ruta de la fuente en los servidores de Google por la ruta relativa a la fuente que acabas de copiar. El CSS te quedaría así:

@font-face {
font-family: 'Flavors';
font-style: normal;
font-weight: 400;
src: local('Flavors'), local('Flavors-Regular'), url(css/fuentes/Flavors.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

4.- Sustituye el CSS en la página Web para que apunte al tuyo "local":

Ahora abre la página .html en la que quieres usar esta fuente y simplemente apunta al archivo .css anterior en lugar de al de Google, así:

<link href='CSS/Flavors-Fuente.css' rel='stylesheet'>

¡Listo!

A partir de ese momento la fuente se servirá desde tu servidor Web y no desde los de Google, como buscabas.

IMPORTANTE: para que esto funcione bien en un servidor Web real, tu servidor Web tiene que poder servir correctamente los archivos de tipo .woff2. Si no se descarga es porque le falta configurar el tipo MIME adecuado para este tipo de archivos, que es "application/font-woff". Si no sabes de qué te hablo no te preocupes: habla con el administrador de tu servidor o del hosting que utilices si es que lo necesitas cambiar.  En general no deberías tener problema. Recuerda la recomendación del principio: generalmente, mucho mejor servir desde Google Fonts directamente.

¡Espero que te resulte útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (3) -

Hola. Excelente el artículo. Tengo una duda porque ahora el tema de la optimización de la velocidad de las páginas web está exigiendo q las letras se vean mientras la página carga. ¿Como optimizarias eso si las letras se sirven desde el servidor de google?

Responder

by Jose M. Alarcon

Hola Wall:

Este tema no depende de que albergues la fuente tú o lo haga Google. Depende de la ruta crítica de renderizado de la página y del hecho de que las fuentes son un recurso que, por defecto, demora su descarga mientras no hayan cargado antes otros recursos más críticos. Existen varias técnicas más o menos complejas para cambiar este comportamiento, entre ellas intentar el atributo rel="preload" en un enlace al archivo con la fuente, el uso de la propiedad CSS font-display, e incluso existe una API específica para carga de fuentes que no está soportada por IE ni Edge. Es un tema más o menos complejo que me parece interesante. A ver si escribo algo al respecto.

De todos modos no influye el hecho de dónde esté la fuente, sino cómo la cargas. Y en eses sentido, como digo en el artículo, espreferible cargarla desde Google que en local puesto que será más rápido que tu servidor casi seguro y además es probable que la fuente ya la tenga cacheada muchos de tus visitantes precisamente por servirla desde Google Fonts.

Saludos.

Responder

Gracias por tu respuesta! Espero ansioso el artículo sobre “CSS font-display” y lo relacionado a este tema. 👍👍👍

Te mando saludos !

Responder

Agregar comentario