• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar Google Fonts en WordPress sin usar plugins

Agregar Google Fonts en WordPress sin usar plugins

Google Fonts en WordPress

[ 30 mayo 2018 ] [ Actualizado: 5 junio 2018 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Tienes un theme en el cual te gustaría añadir un tipo de letra adicional?, pero es posible que quieras evitar el uso de plugins adicionales y mantener tu sitio lo más liviano posible, en este artículo aprenderás cómo agregar Google Fonts en WordPress sin usar plugins de manera simple.

 

1- Seleccionando las Fuentes a usar

Lo primero que tienes que hacer es ir al sitio de Google Fonts y seleccionar los tipo de letra que quieres añadir a tu sitio web.

Seleccionar fuente en Google Fonts

 

Cuando añades una familia de fuente puedes ver la fuente añadida en la parte inferior, al desplegar verás el detalle, tal como se ve en la siguiente imagen.

Pantalla de detalle de fuente

 

Puedes personalizar la fuente añadiendo variaciones, tal como se ve en la siguiente imagen

Seleccion de variaciones de fuente, normal y bold

Te sugiero no elegir muchas variaciones ya que esto implica cargar archivos adicionales para el tipo de letra seleccionado.

 

Además puedes agregar más de una familia o fuente, tal como se ve en la siguiente imagen en donde se añadió la fuente Roboto y Ubuntu.

Pantalla de detalle para incluír varias fuentes

Trata de no añadir más de 2 tipos de letras, una para títulos y otra para párrafos es lo ideal, cargar muchas fuentes impacta en la carga de archivos adicionales que pueden ralentizar la carga de tu sitio.

 

2- Agregando archivo de estilos externo

En nuestro ejemplo anterior Google nos ha generado el siguiente código

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700" rel="stylesheet">

De este código sólo necesitamos la url con sus parámetros, es decir esta url:

https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700

 
Luego en tu archivo functions.php de tu theme puedes agregar el siguiente código:


add_action("wp_enqueue_scripts", "dcms_insertar_google_fonts");

function dcms_insertar_google_fonts(){
    $url = "https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:500,700";
    wp_enqueue_style('google_fonts', $url);
 }

Lo que hace este código es registrar un nuevo archivo de estilos externo que es el que tiene la información para cargar la fuentes de Google que hemos configurado.

Mejor si usas un child theme para agregar este código:
Te sugiero revisar si el código se agregó correctamente revisando el código HTML generado en el front-end de tu sitio.

 

3- Modificaciones CSS

Ya incluiste el tipo de letra, ahora la puedes usar en tu sitio, esto a través de CSS.
Google también te proporciona las reglas CSS que puedes usar:

font-family: 'Roboto', sans-serif;
font-family: 'Ubuntu', sans-serif;

Sin embargo para asignar esto a tu theme tienes que incluirlas dentro de una clase CSS, por ejemplo:


.entry-title{
	font-family: 'Ubuntu', sans-serif;
}

.entry-content{
	font-family: 'Lato', sans-serif;
}

Puedes agregar este código al final de tu archivo style.css, mejor si usas un child theme.
Para detectar las secciones a las cuales quieres cambiar el tipo de letra, te sugiero revisar el artículo que explica Cómo usar el Inspector de código para modificar un theme WordPress.

 

Conclusión

Google Fonts es un servicio que te permitirá incluir tipos de letras adicionales a tu sitio web, hay muchos plugins que te permiten realizar esto, pero si quieres mantener tu sitio liviano y no complicarte con la administración de plugins adicionales, puedes agregar las fuentes que necesites manualmente tal como has visto en este artículo.

 

Aún con dudas, en el siguiente video se detalla los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar archivos de fuentes tipográficas en WordPressAgregar archivos de fuentes tipográficas en WordPress
  • Campos personalizados en productos de WooCommerceCampos personalizados en productos de WooCommerce
  • Agregar un Slider al tema StorefrontAgregar un Slider al tema Storefront
  • Shortcode para búsqueda en tabla personalizada en WordPressShortcode para búsqueda en tabla personalizada en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. DIANA

    20 marzo, 2019

    No me funciona

    • Jhon Marreros Guzmán

      21 marzo, 2019

      Te sugiero revisar el video cuidadosamente, si no te funciona entonces tu theme debe tener algunas clases CSS que sobreescriben o que tienen prioridad sobre las que estas usando. Podrías probar agregando !important al código CSS.

  2. Ramiro

    22 marzo, 2019

    Gracias, me ha servido. Al principio tenía problemas, pero es debido a que estoy diseñando en local y hay que bajar las tipografías a tu ordenador para que funcione.
    muchas Gracias…

  3. Juan Carlo

    1 mayo, 2020

    Hola Jhon, gracias por el tutorial excelente.
    Pero como haría para poner fuentes descargadas ¡Se usa el mismo código oh ! hay otra forma de hacerlo
    Gracias

    • Jhon Marreros Guzmán

      1 mayo, 2020

      Hola, sería mejor que evites usar archivos de fuentes descargadas, la idea de usar fuentes de Google es que varios lo usan y ya esta en la cache del navegador, sin embargo si quieres usar tus propias fuentes que tienes en archivos tendrías que referenciarlas por CSS, busca la documentación de @font-face

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Excluir entradas en el inicio de WordPress

Tareas automáticas con wp-cron en WordPress

Mostrar Tabla Personalizada con Búsqueda y Paginación en WordPress

Personalizar email de registro de nuevo usuario en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados