¿Cómo cambiar la fuente de letra en WordPress?

Conoce cómo hacer que WordPress utiliza las fuentes que identifican tu marca para tener un sitio web con una apariencia mucho más profesional.

Al momento de crear un sitio web es necesario contar con las fuentes tipográficas digitales establecidas en los manuales de identidad corporativa, para ofrecer a los visitantes un diseño web profesional así como un punto de confianza adicional que le permita reconocer la marca.

En todo internet existen servicios desde los que puedes hacer llamados a alguna fuente web para cambiar el aspecto de tu página web. Entre ellas se encuentran las Fuentes web de Adobe Edge, Fonts.com y la más popular de todas Google Fonts, aunque hay más.

A continuación te contaremos cómo modificar la tipografía en las páginas web de WordPress con las fuentes de Google a través del enlazado directo a sus servicios.

¿Qué son las fuentes web?

Las fuentes web son tipografías diseñadas específicamente para su uso en internet y se pueden utilizar de varias maneras, incluso a través de CSS y HTML. Hay un gran número de fuentes web disponibles.

Uno de los usos más populares de las fuentes web es crear cabeceras y títulos que destaquen en una página. Esto puede ser especialmente eficaz para los sitios que quieren crear un diseño llamativo.

La fuente web también pueden utilizarse para dar un toque personal a un sitio web. Con ellas es posible crear firmas o logotipos, incluso añadir un mensaje en tus páginas web.

Deben utilizarse con moderación. Una buena regla general es no utilizar más de dos o tres fuentes web diferentes en una página. Esto ayudará a mantener la página limpia y fácil de leer.

Demasiadas tipografías pueden hacer que una página parezca desordenada y sea difícil de leer.

Beneficios de usar fuentes web

Entre los beneficios de usar estas tipografía o letras se encuentran:

Ahorro de tiempo

Estas fuentes pueden cambiar la apariencia del sitio en cosa de segundo por lo cual ayudará a ahorra tiempo en la conformación del sitio web.

Múltiples opciones

Las tipografías web proporcionan una gran variedad de tipos de letra entre los que elegir, por lo cual puedes crear interesantes combinaciones con múltiples y renovadas opciones.

Fáciles de usar

Son fáciles de usar y no requieren ningún conocimiento experto. Basta con añadir el código a tu web y ver el cambio se verá inmediatamente.

¿Cómo cambiar la tipografía en WordPress?

En WordPress es posible cambiar la tipografía de los sitios web bien sea a través de un plugin o manualmente.

Cambiar las fuentes web en WordPress mediante un Plugin

El complemento Google Fonts Typography  te facilitará el trabajo de cambiar las fuentes en Wordpress.

Lo primero que necesitas es instalar y activar el plugin. Ahora, accede a Apariencia y luego a Personalizar, y allí observarás la presencia de una nueva opción que indica Fuentes de Google.

Haz clic en esa opción y encontrarás alternativas bajo las cuales hacer los cambios a tu tipografía.

La primera a través de los Ajustes Básicos en el cual podrás elegir una fuente para el texto en general, otra para las cabeceras de los textos y otra tanto para los botones como para los campos de entrada.

También puedes optar por los Ajustes Avanzados para darle estilo al título y descripción de la página, al menú, al texto en general, así como a los enlaces y al pie del sitio.

Luego de que hagas todos los cambios, deberás presionar clic en Publicar, pues hasta ese momento cualquier ajuste no será visible en la página web.

Descarga Google Fonts Typography aquí. 👈

Otros plugin o complementos también te ayudarán a realizar estos cambios de forma efectiva, como Easy Google Fonts. Puedes consultar sobre este complemento, aquí.

Cambiar las fuentes web en WordPress de forma manual

Primero debes elegir las fuentes web que deseas agregar y copiar el código HTML que proveen según el servicio seleccionado.

Por ejemplo, en las tipografías de Google debes hacer clic en la fuente que te guste.

A continuación, se mostrarán todas las alternativas.

Al lado de cada una puedes observar un botón que indica + Seleccione este estilo, da un clic en él para elegirlo. Con frecuencia se utilizan un máximo de 2 a 3 tipos de fuentes para una marca.

Si deseas agregar otros tipos de fuentes, solo debes devolverte a la sección principal de las fuentes de Google y repetir los pasos anteriores.

Luego, ubica en la sección superior un botón con tres cuadrados y un signo +.

Al presionar clic en ese botón, se abrirá una ventana que contiene el código HTML que debes incorporar en WordPress. Copialo.

Ahora dirígete a WordPress. Ubica la opción de Apariencia en el panel de control y posteriormente la opción Editor de temas.

En la columna derecha se mostrarán los archivos que integran el tema, ubica el que lleve por nombre header.php. Es una buena práctica antes de editar el archivo, hacer una copia de seguridad.

Ubica dentro del archivo el código <?php wp_head(); ?>, luego inserta una línea en blanco justo antes de este código y pega el texto provisto por la plataforma de fuentes web de Google.

Es importante que te cerciores de añadir solo una línea y pegar el texto sin modificar otros aspectos del archivo, ya que una edición incorrecta puede afectar la ejecución del sitio web.

Se mostrará algo como lo que sigue:
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;1,400&display=swap” rel=”stylesheet”>

Ahora, guarda este archivo. Edita el estilo de la página, para esto ubica la opción Apariencia, luego Personalizar y por último CSS adicional.

En el área de edición que muestra líneas enumeradas, incluye las siguientes etiquetas:

* { font-family: ‘Cabin’, sans-serif; }

El asterisco indicará que queremos que todos los elementos de la página asuman esa fuente, luego un par de llaves y en el centro de las llaves agrega el código provisto por la plataforma de letras de Google en la sección CSS rules to specify families (reglas de hoja de estilo para familias específicas), que se ubica justo debajo del código anterior a este.

Si lo que deseas es que asuma parte de un código con una fuente y otro con otra fuente, entonces tendrás que definir la etiqueta HTML que hace el llamado al tipo de elemento y luego indicarle que debe usar este código de hoja de estilo. Ejemplo:

h1, h2, h3, h4, h5, h5, div { font-family: ‘Cabin’, sans-serif;}

p, a { font-family: ‘Cabin’, sans-serif; }

Finalmente, presiona un clic en Publicar y todos los cambios serán asumidos por tu página.

Descubre las mejores combinaciones de Tipografías para tu página web 👈

Conclusión

Las fuentes son uno de los recursos más importantes dentro de un sitio web, ya que ofrecen un aspecto profesional, así como identidad y transmiten mayor confianza al visitante.

Existen muchas maneras de hacer estos cambios. La más sencilla y que implica menos riesgos es a través de un plugin, en este caso como se busca utilizar los servicios de Google se emplea el complemento Google Fonts Typography.

Pero, existe otra manera de hacer esta vinculación directa con las opciones de Google, y esto es editando de forma manual el archivo header.php de tu tema, e incorporando posteriormente las etiquetas y el tipo de fuente que deben asumir.