Home » Genesis framework » Cómo alojar localmente las fuentes de Google en el tema Genesis Sample (o en cualquier otro tema de WordPress)

Cómo alojar localmente las fuentes de Google en el tema Genesis Sample (o en cualquier otro tema de WordPress)

¿Busca cómo añadir Google Fonts a los temas de WordPress Full Site Editing? Haga clic aquí.

Es posible que haya oído que la carga de Google Fonts desde los servidores de Google viola la GDPR. También es probable que sepas que cargar elementos desde otros servidores puede ralentizar tu sitio web. Por eso hoy aprenderemos a alojar Google Fonts localmente en WordPress.

Hay múltiples maneras de alojar Google Fonts localmente en WordPress – puedes hacerlo usando un plugin, o alojar Google fonts en el tema Genesis Sample sin plugins de terceros – descargando Google Fonts tú mismo, e incluyéndolas en tu tema de WordPress. Te mostraré cómo hacerlo de ambas maneras.

Cómo saber si las fuentes Google de tus sitios web están alojadas localmente

Best WordPress hosting 2024

Si no estás seguro de si tu sitio web carga las fuentes de Google de forma local o remota, puedes utilizar la herramienta gratuita Google Font Checker. No necesitarás instalar ningún plugin ni ejecutar ningún procedimiento complicado. Sólo tienes que introducir la URL de tu sitio web en el campo y ejecutar la prueba para comprobar si tu sitio web WordPress llama a Google para obtener fuentes.

Cómo alojar Google Fonts localmente mediante un plugin (funciona con cualquier tema de WordPress)

Si quieres cargar Google Fonts localmente utilizando cualquier tema de WordPress, puedes utilizar un plugin gratuito OMGF.

Vaya a Plugins >> Añadir nuevo, e introduzca OMGF en el campo de búsqueda de plugins de la parte superior. Instale el plugin OMGF | Host Google Fonts Locally, y actívelo.

wordpress plugin host google fonts locally

En la mayoría de los casos no necesitará hacer nada más – una vez que abra su sitio web WordPress como visitante por primera vez después de la instalación del plugin OMGF, el plugin comenzará a almacenar en caché las fuentes de Google localmente, sin necesidad de cambiar ninguna configuración ni realizar ningún otro cambio.

Si algo no funciona como debería, siempre puedes consultar la página Configuración >> Optimizar fuentes de Google para ver los ajustes del plugin, pero en la mayoría de los casos no es necesario realizar ningún cambio allí.

wordpress local google fonts plugin

Cómo alojar fuentes de Google localmente en Génesis tema de la muestra sin ningún tipo de plugins

Si estás usando Genesis framework, probablemente te guste tener tu panel de administración de WordPress tan limpio y mínimo como sea posible. Como a mí, de hecho.

Hosting Google Fonts localmente en Génesis tema de la muestra es un poco más de trabajo sin un plugin de terceros, pero todavía no es difícil de hacer.

En primer lugar – ir a Apariencia >> Editor de archivos de tema, y comprobar qué tipos de Google Font será necesario.

Por defecto el tema Genesis Sample utiliza la familia de fuentes Source Sans Pro (estilos 400, 400 cursiva, 600, 700). Pero si está utilizando cualquier otra fuente de Google, el método funcionará perfectamente bien para usted también.

Tendrás que eliminar la línea que empieza por ‘fonts-url ‘ para que Genesis no cargue la fuente de Google desde el servidor de Google.

genesis sample theme google fonts

Accede al servidor FTP de tu sitio web WordPress usando Filezilla o cualquier otro cliente FTP, y crea un nuevo directorio llamado fonts en tu instalación WordPress (idealmente debería ser el directorio /wp-content/fonts/ ).

Ahora vaya a la herramienta de ayuda de Google Webfonts y busque la fuente de Google que necesita:

  1. seleccione familia de fuentes a la izquierda
  2. seleccione conjuntos de caracteres, estilos de fuente.
  3. En la ventana Copiar CSS hay un campo Personalizar prefijo de carpeta. Introduce la ruta completa a la carpeta de fuentes que acabas de crear (por ejemplo http://mysite.com/wp-content/fonts/).
  4. Haz clic en el botón Descargar archivos para descargar las fuentes de Google seleccionadas en tu ordenador.
  5. Extrae la descarga y sube los archivos de fuentes de Google al directorio wp-content/fonts/ que creaste anteriormente.
  6. Copia el CSS de la herramienta de ayuda de Google Webfonts: estará listo para utilizarlo en tu sitio web.
how to host google fonts locally in wordpress and genesis framework

Ahora hay un paso final que hay que hacer. Vaya a Apariencia >> Editor de Archivos de Tema, y abra el archivo style.css de su tema Genesis Sample. A continuación, pegue el código CSS copiado anteriormente en el archivo style.css del tema. Péguelo en algún lugar en la parte superior, antes del cuerpo y otros estilos.

Para asegurarse de que los cambios se cargan en su navegador, cambie el número de versión en la parte superior del archivo style.css por un número mayor (por ejemplo, de 3.4.1 a 3.4.2) y haga clic en Guardar cambios.

host google fonts locally in genesis

Una vez hecho esto, tu tema Genesis Sample utilizará las fuentes de Google alojadas localmente en tu servidor.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK