Si conectas con Google para servir las fuentes puedes estar incumpliendo el RGPD
Como veíamos hace unos días un tribunal regional de la ciudad alemana de Múnich ordenó al operador de un sitio web que pague 100 € por daños y perjuicios por transferir los datos personales de un usuario, es decir, la dirección IP, a Google a través de la biblioteca de fuentes del gigante de las búsquedas sin el consentimiento del individuo.
Además, el tribunal señaló que "el demandado también puede usar Google Fonts sin que se establezca una conexión a un servidor de Google y la dirección IP del usuario del sitio web se transmita a Google", lo que requiere que los sitios web alojen las fuentes localmente.
En esta guía paso a paso te ayudaré a alojar Google Fonts localmente a través de CSS y evitar que se carguen externamente. Al hacer esto, tendrás un sitio web más rápido, menos búsquedas de DNS y menos solicitudes HTTP. De esta manera puedes aumentar la puntuación de tu página. Pudimos reducir el 25 % del tiempo de carga de nuestra página alojando nuestras fuentes localmente. Pero también hay desventajas, sigue leyendo...
¿Qué son las fuentes de Google?
Google Fonts se lanzó inicialmente en 2010 como 'Google Web Fonts' y esto lo dice todo. Una fuente de Google es una fuente web de... lo has adivinado: ¡Google!
El directorio de fuentes de código abierto de Google es, con mucho, el directorio más popular del mundo.
¿Por qué usar fuentes de Google?
Elegir la fuente correcta (Tipografía) para tu sitio web es crucial para un buen diseño. Google Fonts te ofrece una gran selección de 1.358 fuentes diferentes. Eso debería darte mucho para elegir. La fuente elegida preferiblemente aumentará la legibilidad y la experiencia del usuario y es crucial para transmitir mejor tu mensaje a los visitantes. Sin embargo, la desventaja de todo esto es que podría reducir el rendimiento de la velocidad del sitio web. Profundicemos un poco más.
Las desventajas de Google Fonts y alojarlas localmente
Al igual que cualquier otra fuente web, las fuentes de Google no vienen preinstaladas en un dispositivo (computadora, tableta, teléfono, etc.) y el navegador debe descargarlas antes de mostrarlas.
La fuente web que usa es una solicitud HTTP adicional, así como otra búsqueda de DNS. Verás fonts.googleapis.com para obtener el archivo CSS y luego font.gstatic.com para descargarlo. Y cada visitante necesita descargar estos archivos al cargar la página. Cuando alojas Google Fonts localmente, todas las solicitudes provendrán del mismo dominio que tus otros activos, y lo más probable es que tampoco necesites este archivo CSS adicional.
Alojar Google Fonts localmente no significa necesariamente que la velocidad de tu página mejorará. En primer lugar, Google Fonts ya podría almacenarse en caché en la computadora de tu visitante al ir a una página web diferente. Cuando esta otra página use la misma fuente que tu, entonces el visitante ya la tendrá instalada.
Además, si no estás utilizando un CDN como Cloudflare o KeyCDN, al final podrías ralentizar tu sitio web alojando tus fuentes localmente. Un CDN reduce las búsquedas de DNS y aumenta la velocidad de un sitio web en general. Está diseñado para hacer todo esto. Y Google, sí, es Google, obviamente también hace esto. Por lo tanto, tus fuentes se cargan relativamente rápido si lo comparas con la descarga de activos de servidores mediocres. Recomendamos no alojar fuentes locales si no estás utilizando un CDN.
Tutorial paso a paso para alojar Google Fonts en local
Paso 0: hagamos rápidamente una prueba para ver dónde estamos
Estamos utilizando GT Metrix para obtener información antes de comenzar. Bien, aquí las cifras importantes para nosotros son que tenemos 72 solicitudes, 1,22 MB de tamaño de página y estamos completamente cargados en 3,9 segundos. Podemos hacerlo mejor. Sigue el tutorial a continuación y comprueba a dónde nos lleva.
Paso 1: mira qué fuentes estás usando
En el mismo informe de rendimiento, también podemos ver qué fuentes se están cargando realmente. Ve a la pestaña 'Waterfall’' y busca fonts.gstatic.com. Al pasar el ratón sobre las solicitudes, nos enseña que estamos usando 'Roboto' como una fuente de Google.
Paso 2: descarga los archivos de fuentes que necesitas
Si vas al sitio web de Google Fonts, puedes seleccionar y descargar todas las fuentes que desees. Pero aquí vienen como una extensión de archivo .ttf. Necesitarías un convertidor para obtener otra compresión más moderna para .woff y .woff2. Hagámoslo un poco más fácil, ¿de acuerdo?
La mejor manera de descargar Google Fonts es usar el Google Webfonts Helper gratuito. Primero elide la fuente que desees y luego selecciona los estilos que necesitas. Para nosotros, esta será la fuente 'Roboto' en los estilos 'Regular (500)' y 'Italic (500)'. También necesitamos Charsets 'Latin' y 'Latin-ext'.
Este servicio gratuito te permite descargar las fuentes en diferentes extensiones de archivo al darle la opción de elegir "Mejor soporte" o "Navegadores modernos". Con 'Best Support', recibirás todos los tipos de archivos, donde la versión 'Modern Browsers' limitará esto a las extensiones .woff y .woff2 más comprimidas únicamente. Y esta última opción es la que queremos.
Después de esto, también verás que recibirás automáticamente el código CSS para solicitar las fuentes. Copia el CSS en tu portapapeles y descarga los archivos de fuentes.
Paso 3: Carga los archivos de fuentes en tu servidor
A continuación, tomarás los archivos que acabas de descargar y los subirás a tu servidor a través de FTP (deberás descomprimir los archivos pues vienen en formato .zip). Creamos una nueva o buscamos ua carpeta llamada 'fuentes' y cargamos las fuentes aquí.
Paso 4: Agrega estas fuentes a tu CSS
Ahora que tenemos todos los archivos correctos en su lugar, deberás hacer referencia a ellos a través de CSS. Muchos gestores de contenido (CMS) como Joomla o WordPress te permiten agregar CSS personalizado a tu sitio, pero si no, también puedes colocarlo en el CSS general. Pega el CSS que copiaste antes en tu hoja de estilo.
/* roboto-500 - latin-ext_latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500italic - latin-ext_latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: url('/../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
Asegúrate de que la URL de origen sea correcta. Debería apuntar a los archivos que acabas de cargar a través de FTP (En nuestro caso ../fonts/Roboto). Si estás utilizando un CDN, entonces debes cambiar la ruta del archivo para hacer referencia al CDN.
Te escucho pensar, 'un CDN no es local, ¿verdad?' Bueno, por mucho que tus archivos provengan de un servidor diferente, todavía se consideran tus activos locales. Y todos tus otros activos ya vendrán del mismo servidor CDN. Entonces, en este caso, puedes decir con seguridad que "alojas Google Fonts localmente" y lo hiciste todo con CSS.
Por último, pero no menos importante, ahora deberá solicitar esta nueva 'font-face'. Puedes agregar tantas clases de CSS como necesites. A veces, debes inspeccionar el CSS de tu página para ver qué clases solicitan esas fuentes y agregarlas a esta lista. Para nosotros, nos limitamos a lo básico a continuación.
body {font-family:'Roboto', sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Roboto', sans-serif;}
Paso 5: Veamos dónde estamos
Entonces, siguiendo los pasos, hemos aumentado bastante el puntaje de nuestra página. Redujimos nuestras solicitudes en '2', quitamos 0,34 MB del tamaño total de la página y todo esto resultó en una reducción del tiempo de carga de 1,1 segundo total, ¡una mejora del 25 %!
Elimina el mensaje 'Asegúrese de que el texto permanezca visible durante la carga de la fuente web'
Mientras estamos en eso, también podríamos deshacernos de este mensaje. Cuando utilizas PageSpeed Insights para medir tu sitio, probablemente hayas visto la instrucción "Asegúrese de que el texto permanezca visible durante la carga de la fuente web".
¡Eliminemos este mensaje! En tu CSS de antes, simplemente podemos agregar 'font-display: swap;' y repetir esto para todas las fuentes que uses. El código se verá así:
/* roboto-500 - latin-ext_latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500italic - latin-ext_latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('/../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/Roboto/roboto-v29-latin-ext_latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
font-display:swap; indica al navegador que use la fuente alternativa para mostrar el texto hasta que la fuente personalizada se haya descargado por completo. Esto también se conoce como "destello de texto sin estilo (flash of unstyled text)" o FOUT.
Conclusión
Al alojar tus Google Fonts en local a través de CSS, redujo el tiempo de carga de nuestra página en un 33 % y el tamaño de la página en 0,34 MB. En algunos casos, este es definitivamente el camino a seguir. Para nosotros esto es un gran aumento. Pero seamos justos, ya comenzamos con un sitio bastante rápido.
