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 el uso de un complemento, puede agregar fácilmente fuentes personalizadas de Google en su sitio para usarlas en su CSS.

Paso 1: seleccione su fuente personalizada de Google

Usar fuentes de Google es muy fácil. Si te diriges a la página principal en “Google Webfonts” y haces clic en cualquier fuente, aparecerá una pequeña ventana emergente para que puedas personalizar la fuente y ver la URL correcta para la fuente CSS.

Si está creando un sitio HTML simple o está editando su tema de WordPress personalizado personal, 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 que está 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 hacer uso del gancho de acción wp_enqueue_scripts de WordPress.

Paso 2: Ponga en cola su 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 señaló anteriormente. Esto permite modificaciones más fáciles del tema infantil y también evita conflictos con complementos de terceros.

Paso 1: Para comenzar a pegar 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 dentro de 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 en particular, usamos la función wp_enqueue_style para cargar la fuente “Roboto” de Google en el sitio web. Sin embargo, puede utilizar esta función varias veces para cargar varias fuentes.

Paso 2: Ahora solo tiene que abrir su archivo style.css y cambiar el nombre de la fuente para los elementos para los que desea la fuente personalizada o agregar algo de CSS personalizado a su sitio para modificar la fuente, como el siguiente ejemplo para cambiar la fuente de todo el cuerpo a Roboto .

body { font-family: "Roboto"; }

Extra: Uso de un complemento de WordPress de Google Fonts

Por supuesto, si no está desarrollando un tema para su distribución o no está usando un tema secundario para su proyecto, entonces 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 modificar 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?

¡A ti ahora! Háganos saber en los comentarios cómo está utilizando las fuentes de Google en WordPress. ¿Está desarrollando temas o complementos, creando sitios web personalizados o es un profesional independiente que ayuda a las personas a modificar los diseños de sus sitios actuales? También háganos saber cuáles son algunas de sus fuentes favoritas de Google. Mis favoritos personales son Roboto, Lora y PT Serif.

Publicaciones relacionadas

Botón volver arriba