¿Quiere agregar fuentes de terceros a su sitio web sin ralentizar la velocidad de su sitio web?
Las fuentes personalizadas mejoran la tipografía de su sitio web y la experiencia del usuario, pero tardan más en cargarse. La buena noticia es que puede alojar sus fuentes localmente para garantizar que su sitio web sea siempre 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 ylas fuentes personalizadas pueden mejorar la estética general del sitio web, pero tienen un impacto negativo en suRendimiento de WordPress. Por ejemplo, si usa una fuente personalizada de Google Fonts, se cargarán a través de servicios de terceros, lo que ralentizará su sitio web.
Afortunadamente, hay una manera de usar fuentes personalizadas sin ralentizar su sitio. Se ha introducido una nueva API Webfonts 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. 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. Debido a que esto sucede sin su consentimiento, la UE ahora lo considera una violación de las normas de privacidad y usted puede ser responsable de los daños y perjuicios.
Dicho esto, veamos cómo alojar fuentes locales en WordPress para un sitio web más rápido. Cubrimos 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). Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.
OMGF es uno de los mejores complementos de tipografía de WordPress. Ofrece una manera amigable para principiantes de mejorar el rendimiento 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ía estar mirando la pestaña «Optimizar fuentes».
Tenga en cuenta la declaración bajo el encabezado «Optimizar las fuentes de Google» de que solo necesita usar la configuración predeterminada para reemplazar automáticamente sus fuentes de Google con fuentes alojadas localmente.
Eso significa que a medida que se desplaza hacia abajo en la página de configuración, todo lo que necesita hacer es asegurarse de que la ‘Opción de visualización de fuente’ tenga seleccionado el ‘Alternar (recomendado)’ predeterminado.
Todo lo que necesita hacer ahora es hacer clic en el botón «Guardar y optimizar» en la parte inferior de la página.
En la parte superior de la pantalla, verá un mensaje que dice «Optimización completa».
¡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 fuentes locales manualmente en WordPress
También puede alojar fuentes localmente sin usar un complemento utilizando el método @font-face de nuestra guía sobre cómo agregar fuentes personalizadas en WordPress. Aunque este método requiere más trabajo, puede usar cualquier fuente que desee en su sitio web.
Debes descargar las tipografías que quieras utilizar en formato web. Hay muchos lugares para encontrar excelentes fuentes web gratuitas, como Google Fonts, Typekit, FontSquirrel y más.
Si no tiene el formato web para su fuente, puede convertirlo usando el 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 anfitrión.
Debe crear una nueva carpeta llamada ‘fuentes’ en su tema o en la carpeta del tema secundario y cargarla allí.
Una vez que haya cargado la fuente, deberá 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 usando la sección CSS adicional del personalizador de temas.
Puedes hacerlo con la regla @font-face de CSS3 como esta:
@font-face {
font-family: Arvo;
src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
No olvide reemplazar la familia de fuentes y la URL con las suyas propias.
Después de eso, puede usar esa fuente en cualquier parte de la hoja de estilo de su tema o en la sección CSS adicional del personalizador de temas. 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 titular ahora 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.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.