Cómo alojar fuentes regionales en WordPress para un sitio web más rápido

¿Quieres añadir fuentes de terceros a tu sitio web sin ralentizarlo?

Las fuentes personalizadas mejoran la tipografía y la experiencia de usuario de su sitio web, pero tardan más en cargarse. La buena noticia es que puedes alojar tus fuentes localmente para que tu sitio web sea siempre rápido.

En este artículo, le mostraremos cómo alojar fuentes locales en WordPress.

¿Por qué alojar las fuentes localmente en WordPress?

Aunque la tipografía y las fuentes personalizadas pueden mejorar la estética general del sitio web, tienen un impacto negativo en el rendimiento de WordPress. Por ejemplo, si utilizas una fuente personalizada de Google Fonts, estas se cargan desde servicios de terceros, lo que ralentizará tu sitio web.

Por suerte, hay una manera de utilizar fuentes personalizadas sin ralentizar su sitio. En WordPress 6.0 se introdujo una nueva API de Webfonts. Esto le permite alojar fuentes localmente para que se carguen más rápido.

Otra razón para alojar Google Fonts a nivel regional es el cumplimiento del RGPD. Se trata de una consideración legal importante si tiene visitantes en su sitio web procedentes de la Unión Europea.

Cuando alguien visita un sitio web que utiliza Google Fonts, Google registra su dirección IP al cargar las fuentes. Dado que esto se hace sin su permiso, la UE lo considera ahora una infracción de la normativa sobre privacidad, y usted puede ser responsable de daños y perjuicios.

Dicho esto, echemos un vistazo a cómo alojar fuentes locales en WordPress para conseguir un sitio web más rápido. Vamos a cubrir dos métodos, y el primer método se recomienda para la mayoría de los usuarios.

Método 1: Alojamiento de fuentes regionales en WordPress con un plugin

Lo primero que tienes que hacer es instalar y activar el plugin OMGF (Optimize My Google Fonts). Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

OMGF es uno de los mejores plugins de tipografía para WordPress. Ofrece una forma sencilla de mejorar el rendimiento y el cumplimiento del RGPD mediante el alojamiento regional de Google Fonts.

Una vez activado, debe visitar Ajustes ” Optimizar Google Fonts para configurar el plugin. Deberá ir a la pestaña “Optimizar fuentes”.

Observa que en el encabezado “Optimizar Google Fonts” se indica que solo tienes que utilizar los ajustes por defecto para sustituir automáticamente las fuentes de Google Fonts por copias alojadas localmente.

Esto significa que, a medida que se desplaza por la página de ajustes, todo lo que tiene que hacer es asegurarse de que la “Opción de visualización de fuentes” tiene seleccionada por defecto la opción “Intercambiar (recomendado)”.

Ahora sólo tiene que hacer clic en el botón “Guardar y optimizar” situado en la parte inferior de la página.

Verás un mensaje en la parte superior de la pantalla que dice ‘Optimización completada correctamente’.

¡Enhorabuena! Sus Google Fonts están ahora alojadas regionalmente. Su sitio web se cargará más rápido y habrá reducido el riesgo de demandas europeas.

Método 2: Alojamiento manual de fuentes regionales en WordPress

También puede alojar fuentes localmente sin usar un plugin usando el método @font-face de nuestra guía sobre cómo añadir fuentes personalizadas en WordPress. Aunque este método requiere más trabajo, le permite utilizar cualquier fuente que desee en su sitio web.

Tienes que descargar las fuentes que quieras utilizar en formato web. Hay muchos sitios donde encontrar fuentes web gratuitas, como Google Fonts, Typekit, FontSquirrel, etc.

Si no dispone del formato web para su fuente, puede convertirla utilizando el generador FontSquirrel Webfont.

Ahora necesitas almacenar las fuentes en tu servidor de alojamiento WordPress. Puedes subir los archivos mediante FTP o utilizando el gestor de archivos cPanel de tu alojamiento.

Debes crear una nueva carpeta llamada ‘fonts’ en el directorio de tu tema o tema hijo y subirla allí.

Una vez que hayas subido la fuente, tienes que cargarla en la hoja de estilos de tu tema utilizando CSS personalizado. Puedes añadir el código directamente al archivo style.css de tu tema, o utilizando la sección CSS adicional del personalizador de temas.

Puedes hacerlo usando una regla CSS3 @font-face como esta:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

No olvides sustituir la familia de fuentes y la URL por las tuyas.

Después, puedes utilizar esa fuente en cualquier parte de la hoja de estilos de tu tema o en la sección CSS adicional del personalizador de temas. El CSS que utilices dependerá de tu tema y de dónde desees utilizar la fuente local. Aquí tienes un ejemplo de nuestro sitio web de demostración:

h1 {
font-family: Arvo, Arial, sans-serif;
}

Como puede ver, nuestro encabezado utiliza ahora la fuente Arvo alojada localmente.

Guías de expertos sobre fuentes en WordPress

Ahora que ya sabe cómo alojar fuentes locales, puede que le interese ver otras guías relacionadas con el uso de fuentes en WordPress.

• Cómo cambiar las fuentes de un tema de WordPress (de forma sencilla)
• Cómo cambiar fácilmente el tamaño de fuente en WordPress
• Cómo añadir fuentes personalizadas en WordPress
• Cómo proteger la privacidad de las fuentes de Google
• Cómo desactivar Google Fonts en su sitio web WordPress
• Cómo añadir fácilmente fuentes de iconos en su tema de WordPress
• Los mejores plugins de tipografía de WordPress para mejorar su diseño

Esperamos que este tutorial te haya ayudado a aprender cómo alojar fuentes regionales en WordPress para conseguir un sitio web más rápido. Puede que también quieras ver nuestra guía sobre cómo aumentar el tráfico de tu blog, o nuestra selección experta de plugins de WordPress imprescindibles para hacer crecer tu sitio.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.