Cómo añadir una segunda tipografía a un párrafo en WordPress

Son ya varias personas las que me han preguntado cómo se puede añadir fuentes diferentes en el mismo párrafo en WordPress. La solución es muy sencilla, pero hay que saber dónde colocar los códigos que necesitamos para que el tema los reconozca.

Tipografías adicionales en WordPress

Existen temas de WordPress que incorporan la posibilidad de añadir fuentes externas de Google Fonts para modificar el aspecto de los textos, pero estas modificaciones son en bloque y afectan por igual a las diferentes etiquetas HTML.

Si elegimos un tipo de fuente para los párrafos, estos adoptarán, de modo general, el aspecto que elijamos, al igual que pasará con los encabezados y titulares.

Pero hay una forma de poder utilizar diferentes tipografías en un mismo párrafo si deseamos ofrecer un toque más personal.

Para seguir este tutorial no es necesario tener conocimientos de programación, pero si dispones de ellos, podrás entender mejor los pasos.

Solución al problema de no mostrar la fuente elegida

El método que aquí explico puede ser una solución para algunos temas que utilizan scripts y funciones para asignar una fuente diferente a la que trae el tema.

Dentro de las opciones de algunas plantillas, existe la posibilidad de cambiar la tipografía de los diferentes elementos del tema, pero muchas veces sólo funciona cuando se visualiza en un ordenador de sobremesa, y se pierde la configuración al mostrarse en un dispositivo móvil o smartphone.

Añadiendo el enlace de la fuente en la cabecera del tema y asignando con CSS cómo queremos que aparezca en el personalizador, saltamos esa barrera que impide que se cargue la fuente con normalidad en cualquier sitio. Y esto mismo es lo que voy a explicar a continuación.

Cargar la tipografía desde Google Fonts

Dentro de las prestaciones que ofrece Goolge, encontramos un servidor de fuentes gratuito que está conectado las 24 horas todos los días del año, y del que podemos extraer las fuentes que necesitemos o nos gusten para nuestra web.

Seleccionar la fuente o fuentes necesarias

Al acceder a Google Fonts aparece un listado con más de 970 familias de fuentes, que podemos filtrar para encontrar la que nos gusta, o buscar por el nombre si la conocemos.

Al lado de cada fuente hay un icono con un símbolo "+", que sirve para seleccionar la fuente. Al pulsar sobre él, se añade a un listado que surge desde la parte inferior de la pantalla con una barra oscura, y pulsando sobre la barra desplegamos las opciones.

Podemos añadir todas las fuentes que queramos, pero con prudencia, ya que puede afectar negativamente a la carga de la web si nos pasamos en la elección.

En la pestaña "Customize" aparecen todas las variaciones de esa fuente (si existen), si interesa cargar diferentes variaciones las marcamos, el código que necesitamos se irá generando automáticamente.

Insertar la tipografía de Google Fonts en la cabecera del tema

Esta es la parte que podemos encontrar más diferente. Dependiendo del tema que utilicemos habrá que realizar la inserción de una u otra manera.

Sin cerrar en ningún momento la página de Google Fonts donde hemos seleccionado las fuentes que necesitamos, en la pestaña "Embed" encontramos el primer código que tenemos que copiar.

Como mencioné al principio de este párrafo, si estamos trabajando con un tema premium como Génesis o Divi, el código podemos colocarlo dentro de la cabecera (head) en las opciones que trae el propio tema.

Pero si no es el caso, existen dos formas de realizar el proceso, una un poco más compleja creando un tema hijo, duplicando el archivo de la cabecera y colocando el texto en él. Y otra más sencilla instalando un plugin que permita pegar el código en esa sección.

En esta ocasión utilizaremos el plugin "Head, Footer and Post Injections". Se instala como cualquier otro plugin buscándolo en el repositorio de plugins de WordPress.

Una vez instalado aparecerá una nueva pestaña en el apartado "Ajustes > Header and Footer". Abrimos las opciones y pegamos el código en la primera pestaña dentro de la opción "Head".

Configurar las hojas de estilo CSS

Ahora que la nueva fuente está cargada en la cabecera del tema, necesitamos indicar cómo se mostrará.

Dentro de las opciones del personalizador, abrimos la pestaña "CSS adicional" y nos inventamos una palabra para crear una nueva clase CSS, yo pondré ".fuentenueva", pero puede ser cualquiera que no coincida con alguna que pueda existir de verdad ya en el tema.

Es importante poner un punto delante para diferenciar esta propiedad con otras dentro de las hojas de estilo.

Seguidamente copiamos el segundo código de la página de Google Fonts y lo pegamos a continuación de la palabra metido entre unas llaves "{...}".

El resultado sería algo el siguiente:

NOTA ADICIONAL: Si quisiéramos asignar una fuente diferente a un encabezado o a los párrafos, de forma global a toda la página, sustituimos el nombre de la clase que nos hemos inventado por la etiqueta que corresponda.

Colocar dos tipografías diferentes dentro de un mismo párrafo

Para conseguir mostrar fuentes diferentes en el mismo párrafo hay que colocar el texto que queremos modificar entre las etiquetas HTML "span", asignando a la etiqueta que abre la clase que hemos puesto en el "CSS adicional".

El párrafo mostrará de forma global la tipografía del tema de WordPress y el texto dentro del párrafo enmarcado en la nueva etiqueta mostrará la nueva fuente.

Para conseguir este efecto debemos utilizar la opción del editor de texto de WordPress "Editar como HTML".

Cuando visualices la página en la parte frontal, tendrás un aspecto diferente del párrafo, con dos tipografías distintas dentro del mismo.

Asignar cambio de fuente a una etiqueta existente

Si vamos a utilizar mucho el recurso de añadir fuentes diferentes en el mismo párrafo, podemos utilizar una etiqueta que no se suele utilizar habitualmente a no ser que como yo, insertemos ejemplos de código dentro de los párrafos.

Si sustituimos la palabra de la clase que nos hemos inventado ".fuentenueva" por la etiqueta "code" dentro de la pestaña "CSS adicional", sólo tenderemos que seleccionar el texto dentro del párrafo y aplicar esa propiedad desde el menú.

El código CSS sería el siguiente:

Y para aplicarlo seleccionamos el texto que nos interesa y elegimos "Código integrado" en el menú del editor de WordPress.