Cómo Alojar Fuentes Locales en WordPress para un Sitio Web Más Rápido

Una tipografía hermosa puede mejorar el diseño de tu sitio web y cautivar a tu audiencia.

Pero mientras mejorábamos el rendimiento de nuestro sitio web, descubrimos que depender de servicios de fuentes de terceros puede hacer que WordPress sea más lento, perjudicando la experiencia del usuario y potencialmente tu SEO.

Hemos encontrado algunas maneras de evitar este problema. Una solución es alojar las fuentes localmente.

Al tomar el control de tus archivos de fuentes, tu sitio puede omitir esos pasos de carga adicionales, asegurando un sitio web increíblemente rápido con una mejor experiencia de usuario y SEO.

En este artículo, te mostraremos cómo alojar fuentes locales en WordPress, lo que te permitirá mejorar la tipografía de tu sitio mientras mantienes un rendimiento óptimo.

¿Por qué alojar fuentes localmente en WordPress?

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

Afortunadamente, hay una manera de usar fuentes personalizadas sin ralentizar tu sitio. Se introdujo una nueva API de Webfonts en WordPress 6.0. Esto te permite alojar fuentes localmente para que se carguen más rápido.

Otra razón para alojar Google Fonts localmente es para cumplir con GDPR. Esa es una consideración legal importante si tiene visitantes del sitio web de la Unión Europea.

Cuando alguien visita un sitio web que utiliza Google Fonts, Google registra su dirección IP cuando se cargan las fuentes. Dado que esto se hace sin su permiso, la UE ahora lo considera una violación de las regulaciones de privacidad, y usted puede ser responsable de los daños.

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

1. Alojamiento de fuentes locales en WordPress con un plugin
2. Alojamiento de fuentes locales en WordPress manualmente
3. Guías expertas sobre fuentes en WordPress

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

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

OMGF es uno de los mejores plugins de tipografía de WordPress. Ofrece una forma fácil para principiantes de mejorar el rendimiento y el cumplimiento de GDPR alojando Google Fonts localmente.

Al activarse, necesitas visitar Configuración » Optimizar Google Fonts para configurar el plugin. Deberías estar viendo la pestaña ‘Optimizar Fuentes’.

Observa la declaración bajo el encabezado ‘Optimizar Google Fonts’ de que solo necesitas usar la configuración predeterminada para reemplazar automáticamente tus Google Fonts con copias alojadas localmente.

Eso significa que al desplazarte por la página de configuración, todo lo que necesitas hacer es asegurarte de que la ‘Opción de Fuente-Mostrar’ tenga la configuración predeterminada de ‘Swap (recomendado)’ seleccionada.

Todo lo que necesitas hacer ahora es hacer clic en el botón ‘Guardar y Optimizar’ en la parte inferior de la página.

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

¡Felicidades! Tus Google Fonts ahora están alojadas localmente. Tu sitio web cargará más rápido y has reducido el riesgo de demandas europeas.

Método 2: Alojar Fuentes Locales en WordPress Manualmente

También puedes alojar fuentes localmente sin usar un plugin utilizando el método @font-face de nuestra guía sobre cómo agregar fuentes personalizadas en WordPress. Si bien este método requiere más trabajo, te permite usar cualquier fuente que te guste en tu sitio web.

Necesitas descargar las fuentes que deseas usar en un formato web. Hay muchos lugares para encontrar excelentes fuentes web gratuitas, como Google Fonts, Typekit, FontSquirrel, y más.

Si no tienes el formato web para tu fuente, puedes convertirlo usando el generador de Webfonts de FontSquirrel.

Ahora necesitas almacenar las fuentes en tu servidor de hosting de WordPress. Puedes subir los archivos usando FTP o usando el Administrador de Archivos del cPanel de tu host.

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, necesitas cargarla en la hoja de estilos de tu tema usando CSS personalizado. Puedes agregar el código directamente al archivo style.css de tu tema, o usando la sección CSS Adicional del personalizador de temas.

Puedes hacer eso 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 reemplazar la familia de fuentes y la URL con las tuyas.

Después de eso, puedes usar 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 uses dependerá de tu tema y de dónde desees usar la fuente local. Aquí tienes un ejemplo de nuestro sitio de demostración:

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

Como puedes ver, nuestro encabezado ahora está usando la fuente Arvo alojada localmente.

Guías expertas sobre fuentes en WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo alojar fuentes locales en WordPress para un sitio web más rápido. También te pueden interesar otras guías relacionadas con el uso de fuentes en WordPress:

• ¿Qué es una fuente segura para la web + 19 mejores fuentes seguras para la web
• Cómo cambiar fuentes en tu tema de WordPress (maneras fáciles)
• Cómo cambiar fácilmente el tamaño de fuente en WordPress
• Cómo agregar fuentes personalizadas en WordPress
• Cómo hacer que Google Fonts sea amigable con la privacidad
• Cómo deshabilitar Google Fonts en su sitio web de WordPress
• Cómo agregar fácilmente fuentes de iconos en tu tema de WordPress
• Los Mejores Plugins de Tipografía de WordPress para Mejorar tu Diseño

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.