Vamos a explicar de manera sencilla como cargar google fonts en local con Divi, si utilizamos alguna herramienta como GTMETRIX para ver el rendimiento de nuestra web veremos que hay varias fuentes que usamos que se cargar desde nuestra web pero hay otras fuentes externas que nos obliga a pedirlas a un dominio externo como puedes ser google.
- Identificar las fuentes que usa nuestra web con gtmetrix
- descargar las fuentes de google en nuestro ordenador
- subir nuestras fuentes locales al hosting de wordpress
- cargar por css las fuentes de google en local desde wordpress
Identificar las fuentes que usa nuestra web con GTMETRIX
Lo primero que tenemos que hacer para cargar google fonts en local con DIVI es ir a la herramienta gratuita de GTMETRIX y hacer un test de nuestra web . Veremos que en el resultado aparecen diferentes pestañas :
– Summary
– Performance
– Structure
– Waterfall
– Video
– History
Nos vamos a centrar en la que nos interesa para optimizar las fuentes de google en local que es la pestaña de Waterfall.
Como vemos en la imagen anterior nos indica desde Gtmetrix google fonts en local que carga nuestra web, son las que proceden del dominio fonts.gstatic.com, si hacemos clic en una de las fuentes externas del dominio fonts.gstatic.com nos muestra más información sobre el tipo de fuente que es:
https://fonts.gstatic.com/s/montserrat/v24/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w3aXo.woff2
Nos tenemos que fijar en el nombre de la fuente que en este caso es “montserrat”, el nombre de la fuente es lo primero que aparece despues de “fonts.gstatic.com/s/”
Descargar las fuentes de Google en nuestro ordenador
Ahora que ya sabemos las fuentes de google fonts que utiliza nuestra página web tenemos que ir a google a descargarlas en google web fonts helper.
Tenemos que buscar nuestra fuente de google fonts que queremos cargar en local en nuestro wordpress , en nuestro ejemplo la fuente que buscamos es “montserrat”
En el apartado 1 “Select charsets” dejamos marcada la opción por defecto que viene “latin”.
En el apartado 2 “Select styles” eligimos los tamaños de fuente que utiliza nuestra web, normalmente es “regular” que es el tamaño de caracter estandar de 400. Si al crear la web has usado otros tamaños diferentes puedes selecctionarlos también, la letra bold son 600 por lo general, asi que puedes seleccioanrla también si no estás seguro.
En el apartado 3 “Copy CSS” lo vamos a dejar de momento porque lo usaremos en la sección del articulo final “Cargar por CSS las fuentes en local desde wordpress”
En el apartado 4 “Download files” vamos a darle al botón azul que pone en este ejemplo:
montserrat-v24-latin.zip
Este es el archivo de fuente local que necesitamos subir en el siguiente paso “Subir nuestras fuentes locales al hosting de wordpress”
Subir nuestras fuentes locales al hosting de wordpress
Para la optimización de fuentes de google en wordpress necesitamos ese archivo que nos acabamos de descargar, pero ojo que no podemos subir el archivo .zip directamenete al hosting. Tenemos que descomprimirlo, nos quedarán varios archivos de tipo fuente como eot, woff, woff2, truetype o svg
Nos vamos a crear una carpeta en nuestro hosting que se llame “fonts” dentro de nuestro archivo del tema , preferiblemente dentro de un tema hijo o child theme, si no sabes como crearlo te dejo aquí un enlace a nuestro tutorial de como crear un tema hijo en DIVI.
Copiamos las fuentes de google fonts en esta carpeta que hemos creado, yo solo necesitaba las fuentes .woff y .woff2 pero si te aparecen más en el archivo de fuente que tú has descargado copialas todas.
Para saber como alojar las fuentes de google en tu hosting wordpress tenemos que hacerlo mediante el gestor de archivos de nuestro hosting, en mi caso siteground, o mediante un cliente FTP como Mozilla.
WordPress carga google fonts en local a través de la ruta en la que hemos copiado las fuentes, en mi caso la carpeta llamada “Child” dentro de la carpeta por defecto “Themes”, ahora te explico en el siguiente paso “Cargar por CSS las fuentes de Google en local desde wordpress” como vamos a usar esta ruta en la url del codigo CSS.
Cargar por CSS las fuentes de Google en local desde wordpress
Llegamos a la parte final de cargar google fonts en local con DIVI. Tenemos que decirle a nuestro wordpress que llame a las fuentes de google fonts desde el directorio de wordpess donde hemos pegado los archivos de las fuentes descargadas desde google fonts.
/* montserrat-regular – latin */
@font-face {
font-family: ‘Montserrat’;
font-style: normal;
font-weight: 400;
src: local(”),
url(‘../Child/fonts/montserrat-v23-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘../Child/fonts/montserrat-v23-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Este codigo de CSS lo podemos copiar directamente del paso 3 “Copy CSS” que os habia mencionado en el apartado anterior de “Descargar las fuentes de Google en nuestro Ordenador”
En la parte inferior que pone “Customize folder prefix (optional):” aparece el nombre de la carpeta que hemos creado en nuestro tema hijo o tema child. En nuestro caso para hacerlo más sencillo lo hemos llamado igual “fonts” pero si queréis poner otro nombre como “fuentes_locales” habria que cambiar donde pone
“Customize folder prefix (optional): ../fonts/” por “Customize folder prefix (optional): ../fuentes_locales/”
Del mismo modo que hemos creado una carpeta en nuestro tema que se llama “Child” si le llamamos de otra manera como “MiTema” tendremos que añadirlo a la ruta para cargar la fuente:
“Customize folder prefix (optional): ../Child/fonts/” por “Customize folder prefix (optional): “../MiTema/fonts/”
Para insertar este codigo CSS para cargar google fonts en local con DIVI nos tenemos que ir a Apariencia-> Editor de archivos de temas
En la parte de la derecha veremos en nombre de nuestro tema, en caso de que sea un tema hijo tenemos que seleccionar del desplegable de la derecha que pone “Elige el tema a editar” y apretar el botón seleccionar.
Para cargar google fonts en local con DIVI tenemos que desactivar la opción “Usar las fuentes de Google” para que cargar google fonts de manera local.
Si volvemos a GTMETRIX veremos que las fuentes ya se cargan todas desde nuestro dominio.