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

¿Quiere agregar fuentes de terceros a su sitio sin ralentizar su sitio?

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

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

¿Por qué alojar fuentes localmente en WordPress?

Mientras que la tipografía y Las fuentes personalizadas pueden mejorar la estética general de un sitio web, pero tienen un impacto negativo en la tuya Rendimiento de WordPress. Por ejemplo, si usa una fuente personalizada de Google Fonts, los servicios de terceros las cargarán, lo que ralentizará su sitio web.

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

Otra razón para alojar Google Fonts localmente es cumplir con el RGPD. Esta 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. Como esto está sucediendo sin su consentimiento, la UE ahora ve una infracción de las normas de protección de datos y usted podría ser responsable de los daños y perjuicios.

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

Método 1: alojar fuentes locales en WordPress con un complemento

Lo primero que debes hacer es instalarlo y activarlo. Dios mío Complemento (optimizar mis fuentes de Google). Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

OMGF es uno de los mejores complementos de tipografía de WordPress. Ofrece una manera amigable para principiantes de mejorar la productividad y el cumplimiento de GDPR al alojar Google Fonts localmente.

Después de la activación, debe visitar Ajustes » Optimizar fuentes de Google para configurar el complemento. Deberías mirar la sección Optimizar fuentes.

Tenga en cuenta la explicación bajo el encabezado "Optimización de las fuentes de Google" de que solo debe usar la configuración predeterminada para reemplazar automáticamente sus fuentes de Google con copias alojadas localmente.

Esto significa que cuando se desplaza hacia abajo en la página de configuración, todo lo que tiene que hacer es asegurarse de que la opción "Mostrar fuente" esté configurada en "Cambiar (recomendado)" de forma predeterminada.

Todo lo que tiene que hacer ahora es hacer clic en el botón "Guardar y optimizar" en la parte inferior de la página.

El mensaje "Optimización completada con éxito" se muestra en la parte superior de la pantalla.

¡Felicidades! Sus fuentes de Google ahora están alojadas localmente. Su sitio web se carga más rápido y ha reducido el riesgo de demandas europeas.

Método 2: alojar manualmente fuentes locales en WordPress

También puede alojar fuentes localmente sin usar un complemento usando el método @font-face de nuestra guía para agregar fuentes personalizadas en WordPress. Aunque este método requiere más trabajo, le permite usar cualquier fuente que desee en su sitio web.

Debe descargar las fuentes que desea utilizar en formato web. Hay muchos lugares donde puedes encontrar excelentes fuentes web gratuitas, como: B. Google Fonts, Typekit, FontSquirrel y otras.

Si no tiene el formato web para su fuente, puede usarlo para convertirlo Generador de fuentes web FontSquirrel.

Ahora necesita almacenar las fuentes en su servidor de alojamiento de WordPress. Puede cargar los archivos a través de FTP o mediante el administrador de archivos cPanel de su host.

Debe crear una nueva carpeta llamada "fuentes" en su directorio de tema o tema secundario y cargarlo allí.

Después de cargar la fuente, debe cargar la fuente en la hoja de estilo de su tema usando CSS personalizado. Puede agregar el código directamente al archivo style.css de su tema o usar la pestaña CSS adicional del personalizador de temas.

Puede hacer esto usando la regla @font-face de CSS3 de esta manera:

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

Asegúrese de reemplazar la familia de fuentes y la URL con las suyas propias.

Luego puede usar esta fuente en cualquier parte de la hoja de estilo de su tema o en la sección "CSS adicional" del personalizador de temas. Quién El CSS que usa depende de su tema y de dónde desea usar la fuente local. Aquí hay un ejemplo de nuestro sitio web de demostración:

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

Como puede ver, nuestro encabezado ya usa la fuente Arvo alojada localmente.

Esperamos que este tutorial lo haya ayudado a aprender cómo alojar fuentes locales en WordPress para un sitio web más rápido. También puede querer aprender cómo aumentar el tráfico de su blog o consultar nuestra lista de complementos de WordPress imprescindibles para hacer crecer su sitio web.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.