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

por | 0 Comentarios

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.

Suscríbete:

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.

Página principal de Google Fonts

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.

Variaciones tipográficas de Google Fonts
Variaciones tipográficas

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.

Código de la tipografía de Google Fonts para la cabecera
Código para pegar en el «Head»

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.

Colocar código en head en el tema Génesis
Añadir código en Génesis desde el personalizador
Colocar código en head en el tema Divi
Añadir código en Divi desde las opciones del 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.

Instalar nuevo plugin para añadir tipografía secundaria
Instalar plugin «Head, Footer and Post Injections»

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».

Código insertado en head con plugin en WordPress
Código insertado con plugin en cualquier tema que lo necesite

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».

Editar párrafo en Gutemberg como HTML
Editar párrafo 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.

Fuentes diferentes en el mismo párrafo aplicado con CSS
Tipografía diferente en el mismo párrafo

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.

Fuentes diferentes en el mismo párrafo con etiqueta code
Utilizar opción del menú para cambiar tipografía

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido