4. Instalar Google Fonts en el Child Theme
Finalmente, debe instalar las fuentes descargadas en su Child Theme de WordPress. Solo subir las fuentes al servidor no es suficiente, ya que WordPress o el navegador no sabrán que esas fuentes están disponibles o cómo usarlas.
Debe instalar las fuentes para que WordPress las reconozca y las asocie correctamente, y esto debe hacerse en el Child Theme, no en el tema principal. Si las instala en el tema principal y realiza cambios en el archivo style.css, estos cambios se sobrescribirán con cualquier actualización del tema. Al instalarlas en el Child Theme, sus ajustes estarán protegidos.
Hay dos opciones disponibles para instalar tus Google Fonts.
Descargar el CSS
Cuando descargue las fuentes de Google, también puede generar el código CSS necesario. Este código CSS se puede copiar desde el Google Webfont Helper y pegar en el archivo style.css de su Child Theme.
Asegúrese de que los rutas de los archivos de las fuentes estén configuradas correctamente en el CSS para que WordPress pueda encontrar las fuentes.
Modificar los archivos CSS
Una vez implementado el CSS, asegúrese de asignar las fuentes a los elementos correspondientes en el archivo style.css de su Child Theme.
Después de realizar estos cambios, actualice su Child Theme para asegurarse de que los ajustes se guarden correctamente.
Para comprobar si las fuentes de Google se han vinculado localmente, puede usar el plugin Remover Google Fonts References. Este plugin detectará cualquier fuente de Google restante después de borrar el caché y ejecutar el plugin.
Otra opción es usar el Google Fonts Checker de la página www.sicher3.de. Solo tiene que ingresar la URL de su sitio en el verificador y hacer clic en «verificar» para comprobar el estado.
Precaución con Google Maps
Aunque haya configurado su sitio correctamente con el aviso de cookies y haya vinculado las fuentes de Google de forma local, existe un pequeño inconveniente con Google Maps. Si tiene Google Maps integrado en su sitio, puede enfrentar problemas con la privacidad, ya que Google Maps utiliza la fuente Roboto, que se carga desde los servidores de Google.
Para evitar que esta fuente se cargue desde el servidor de Google, debe eliminarla utilizando un pequeño código JavaScript que puede agregar al archivo /js/norobotofontbymaps.js en el directorio del Child Theme.
El código sería:
¡var head = document.getElementsByTagName('head')[0];//Save the original method
var insertBefore = head.insertBefore;
// Replace it!
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href &&
newElement.href.indexOf('//Fonts.googleapis.com/css?family=Roboto') > -1) {
console.info('Prevented Roboto from loading!');
return;
}
insertBefore.call(head, newElement, referenceElement);
};
Luego, debe agregar el siguiente código en el archivo functions.php de su Child Theme:
/*Prevent roboto Fonts loaded by google Maps api*/
$child_theme_url = get_stylesheet_directory_uri();
wp_register_script( 'norobotofontbymaps',
$child_theem_url.'/js/norobotofontbymaps.js', 'jquery', "1", true);
wp_enqueue_script ('norobotofontbymaps');
