Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Una tipografía bonita puede mejorar el diseño de tu sitio web y cautivar a tu audiencia. Pero como expertos en rendimiento de WordPress, nos damos cuenta de que confiar en servicios de tipografía de terceros puede ralentizar tu sitio, perjudicar la experiencia del usuario y dañar potencialmente tu SEO.

La solución es alojar las fuentes localmente. Al tomar el control de sus archivos de fuentes, su sitio web puede omitir esos pasos de carga adicionales, lo que garantiza un sitio web ultrarrápido con una mejor experiencia de usuario y SEO.

En este artículo, le mostraremos cómo alojar fuentes regionales en WordPress, lo que le permitirá mejorar la tipografía de su sitio manteniendo un rendimiento óptimo.

How to Host Local Fonts in WordPress for a Faster Website

¿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.

OMGF Settings

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.

Click the Save & Optimize Button

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.

Downloading a Google Font

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í.

Upload the Fonts to Your Website

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.

Adding Custom CSS With the Theme Customizer

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.

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

7 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. KENNETH GRAY

    Do I remove the wp google fonts plugin once the fonts have been moved over to my website?

    k

    • WPBeginner Support

      If you use the plugin, we would not recommend removing it to keep the fonts on your site.

      Administrador

  3. Ashikur Rahman

    do i need to keep this plugin or i can remove that?

    • WPBeginner Support

      If you are using the plugin then we would recommend keeping the plugin active.

      Administrador

  4. Liz S

    Don’t you also have to make some change to the functions.PHP file to add the new fonts so they show up in the customizer?

    • WPBeginner Support

      If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method :)

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.