Instalar WordPress

Guía de Instalación

Optimizar WordPress

Optimización y Velocidad

Seguridad de WordPress

Guía de Protección

Tutorial para agregar fuentes de Google en WordPress

Cómo Agregar Fuentes de Google en WordPress Correctamente

La tipografía juegan un papel importante en la presentación del contenido de tu sitio web, para facilitar la lectura y el consumo del texto de forma cómoda y agradable para los visitantes. Google ofrece una extensa gama de fuentes gratuitas que los diseñadores y propietarios de sitios pueden usar. Hoy te explicaremos cómo agregar fuentes de Google en tu WordPress de forma correcta paso a paso.

Fuentes de Google

Las fuentes de Google , o Google Fonts en inglés, es una vasta librería de fuentes de la web almacenadas en los servidores de Google, que fue creada en el año 2010, y que cualquier persona puede utilizar en una página web.

Con la librería de fuentes de Google puedes utilizar una combinación profesional para darle una apariencia atractiva y al mismo tiempo ofrecer una forma cómoda a los usuarios que consumen el contenido de tu sitio web.

Para integrar nuevas fuentes de Goolge a tu sitio web de WordPress no necesitas tener conocimientos técnicos avanzados, y tampoco estás obligado a subir los archivos de las fuentes a tu propio servidor para usarlas.

Elegir Fuentes de Google

El primer paso que tienes que hacer es seleccionar las fuentes que quieres utilizar en tu sitio web. La página principal de fuentes de Google viene con una interfaz desde la cual seleccionas pulsando el símbolo (+) que aparece en al lado de la fuente.

Una vez hecho esto, el sistema de Google Fonts la añade al grupo de fuentes seleccionadas sin registrarte a un formulario o iniciar sesión. Todo funciona de forma automática.

Métodos de cómo usar fuentes de google seleccionadas

Al terminar de elegir las fuentes que necesitas usar en WordPress, abres la ventanilla que aparece en la parte inferior de las fuentes seleccionadas, para desplegar una página donde aparece el método de uso de las fuentes de Google.

En la parte superior de esa ventana encontrarás un botón que te permite descargar las fuentes que eliges para subirlas a tu servidor si deseas hacerlo.

Añadir Fuentes de Google en WordPress

Google Fonts te ofrece dos métodos para utilizar las fuentes en tu WordPress, el primer método es el estándar donde añades una línea de código en la cabecera de tu sitio web. El segundo método es importar la fuente directamente en el archivo de estilización style.css de tu tema actual.

Los dos métodos que detallamos en este tutorial hacen el mismo trabajo, puedes utilizar el que más te parezca cómodo o fácil de llevar a cabo, sólo asegúrate de seguir los pasos correctamente.

Pero antes de realizar cambios en los archivos de tu sitio web, te recomendamos crear un backup completo y fresco de los archivos de tu sitio web con el fin de mantener una versión de respaldo en caso de que algo salga mal.

Agregar Fuentes en Header.php de WordPress

Esta línea de código añade la etiqueta link al header o cabecera de tu sitio web, y es todo lo que necesitas para empezar a utilizarla. Lo que sigue después es aplicar la fuente en tu hoja de estilo a un selector o etiqueta de HTML donde quieres aplicar la fuente.

<link href="https://fonts.googleapis.com/css?family=Roboto|Supermercado+One" rel="stylesheet">

Fíjate que, en la línea de arriba tenemos las dos fuentes que hemos seleccionado en las fuentes de Google, o sea puedes usar a las dos una vez aplicas el código en tu sitio.

Agregar Fuentes con @import en style.css

El segundo método que te provee esta plataforma de Google Fonts para utilizar sus fuentes en tu sitio web es el de importar la fuente directamente en el archivo de estilo de tu tema actual.

Lo primero que debes hacer es abrir el archivo style.css de tu tema actual, preferiblemente del tema hijo (child theme) si lo estás utilizando. Te recomendamos ver cómo editar los archivos de WordPress si no estás acostumbrado a hacerlo.

@import url('https://fonts.googleapis.com/css?family=Roboto|Supermercado+One');

El siguiente paso es pegar el código de la línea que aparece arriba en la parte superior del archivo style.css justo después del comentario de declaración del nombre de tema y sus detalles.

Guardas los cambios, subes de vuelta el archivo de estilo a su ubicación natural dentro de la carpeta del tema para efectuar los cambios. Lo que sigue ahora es aplicar la fuente a tu texto.

h2 {
    font-family: 'Supermercado One', cursive;
}

En este ejemplo utilizamos la fuente de Supermercado One en el heading h2 que utilizamos en los títulos de los párrafos y textos en general. Dejamos en tus manos la decisión de elegir las fuentes que mejor combinan con el diseño de tu sitio web.

Método Alternativo para Insertar Fuentes de Google en WordPress

Seguramente los métodos más recomendables para añadir fuentes de Google en WordPress si eres una persona principiante, o no te gusa hacer cambios sofisticados en los archivos y “ensuciarte” las manos son los anteriores.

Sin embargo hay otro método que puede resultar más cómodo para otras personas que es añadir las fuentes de Google a través de un código PHP, si eres una de esas personas, entonces presta atención.

function agregar_fuentes_google() {
    wp_enqueue_style( 'wpbody-fuentes-google', 'href=https://fonts.googleapis.com/css?family=Roboto|Supermercado+One', false ); 
}
add_action( 'wp_enqueue_scripts', 'agregar_fuentes_google' );

Este código es una función de PHP, donde incrustas el enlace de las fuentes de Google directamente de los servidores de Google en tu sitio utilizando un hook de WordPress.

Para utilizar este código tienes dos métodos. El primero y más tradicional es pegarlo en el archivo functions.php de tu tema actual. El segundo y más recomendable es crear un plugin personalizado donde pegas este código y cualquier otro que desees integrar en tu WordPress.

Una vez realizado el cambio, aplicas la fuente a cualquier texto de tu sitio web utilizando la forma tradicional de CSS como hemos visto arriba para visualizar el resultado en tu contenido.

Esto es todo. Si te queda alguna pregunta, usa el formulario de comentarios y te respondemos.

Te invitamos a seguir nuestra página de facebook y twitter, para obtener los tutoriales recientes de cómo optimizar, mejorar y proteger tu WordPress.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar