Cómo cargar manualmente las fuentes de Google en WordPress

Cómo cargar manualmente las fuentes de Google en WordPress

los API de fuentes web de Google Fonts le permite cargar fácilmente fuentes personalizadas (a diferencia de las fuentes de escritorio estándar como Arial, Georgia, Times New Roman o Helvetica) simplemente haciendo referencia a una hoja de estilo en la etiqueta de encabezado de su sitio. Si está desarrollando temas de WordPress y desea personalizar las fuentes de su sitio sin usar un complemento, puede fácilmente poner en cola las fuentes personalizadas de Google en su sitio para usarlas en su CSS.

Paso 1: seleccione su fuente personalizada de Google

Usar Google Fonts es muy fácil. Si accede a la página principal en “Fuentes web de GoogleY haga clic en cualquier fuente, aparecerá una pequeña ventana emergente para que pueda personalizar la fuente y mostrar la URL correcta para la fuente CSS.

Si está creando un sitio HTML simple o modificando su tema de WordPress personalizado, todo lo que necesita hacer para cargar la fuente personalizada en su sitio web es copiar y pegar el enlace de la hoja de estilo a la fuente personalizada alojada en Google en su etiqueta (ubicada en header.php en WordPress).

Dicho esto, la forma preferida de agregar la fuente de Google a su tema de WordPress (muy importante al crear temas para la distribución) es usar WordPress. wp_enqueue_scripts gancho de acción.

Paso 2: Pon en cola tu fuente de Google

Como se mencionó anteriormente, puede colocar fácilmente el código de Google en su archivo header.php, sin embargo, es mejor poner en cola el script a través del gancho de acción como se discutió anteriormente. Esto permite modificaciones más fáciles del tema hijo y también evita conflictos con complementos de terceros.

Etapa 1: Para comenzar, pegue el siguiente código en su archivo functions.php (si este archivo no existe, cree uno nuevo en la carpeta de su tema y asegúrese de que el código siguiente esté pegado en las etiquetas php.

function myprefix_enqueue_google_fonts() { 
	wp_enqueue_style( 'roboto', 'https://fonts.googleapis.com/css?family=Roboto' ); 
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_google_fonts' ); 

En este fragmento de código, usamos el wp_enqueue_style para cargar la fuente de Google “Roboto” en el sitio web. Sin embargo, puede utilizar esta función varias veces para cargar varias fuentes.

2do paso: Ahora todo lo que necesita hacer es abrir su archivo style.css y cambiar el nombre de fuente de los elementos para los que desea usar la fuente personalizada o agregar CSS personalizado a su sitio para cambiar la fuente, como el siguiente ejemplo para cambiar todo fuente del cuerpo a Roboto.


body { font-family: "Roboto"; }

Extra: uso de un complemento de WordPress para fuentes de Google

Por supuesto, si no está desarrollando un tema para su distribución o si no está usando un tema hijo para su proyecto, puede ser mejor usar un complemento personalizado para agregar fuentes a su sitio. En el artículo titulado “Mejore la tipografía de su sitio web de WordPress con las fuentes de Google”, recomendamos algunos complementos increíbles que le permitirán cambiar fácilmente las fuentes en su sitio de WordPress y, más específicamente, utilizando las fuentes de Google.

Tus pensamientos … ¿Cómo usas Google Fonts?

¡Tu turno ahora! Háganos saber en los comentarios cómo usa Google Fonts en WordPress. ¿Desarrolla temas o complementos, crea sus propios sitios web personalizados o es un escritor independiente que ayuda a las personas a pulir el diseño de su sitio actual? También díganos cuáles son sus fuentes favoritas de Google. Mis favoritos personales son Roboto, Lora y PT Serif.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba