1. Web Design
  2. WordPress

Cómo cambiar el tamaño de la fuente en WordPress

Scroll to top
5 min read

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Cambiar el tamaño de la fuente en tu sitio de WordPress es algo que puedes hacer rápida y fácilmente para una pequeña sección de texto, o algo que puede requerir un poco más de trabajo si deseas hacerlo para una sección de texto más grande.

En este tutorial rápido, te mostraré cómo cambiar el tamaño de la fuente en tu sitio de WordPress.

Te enseñaré dos métodos rápidos:

  • cambiando el tamaño de la fuente en un bloque individual
  • agregando una clase CSS a un bloque y luego estilizando la clase

También te daré una introducción al proceso de cambiar el tamaño de la fuente a lo largo de tu sitio editando tu hoja de estilo.

Si quieres aprender cómo agregar fuentes completamente nuevas a WordPress, también puedes aprender cómo hacerlo aquí.

Cómo cambiar el tamaño de la fuente de un bloque de texto

Comencemos con el método más rápido.

Al editar texto en tus entradas de WordPress, puedes optar por hacer que un bloque de texto tenga un tamaño de fuente diferente del que tienen los otros bloques de la página.

Esto puede ayudarte a resaltar una sección específica de tu página.

Debes usar este método con precaución: si lo usas demasiado, esto ocasionará que tu sitio se vea desordenado y poco profesional. Y si lo haces más de una vez, asegúrate de usar el mismo tamaño de fuente para todas las secciones de texto que sean más grandes o más pequeñas.

Comienza localizando el bloque de texto cuyo tamaño de fuente quieras cambiar.

paragraph blockparagraph blockparagraph block

A la derecha de la pantalla, en el panel Block (Bloque), abre la pestaña Text Settings (Configuración del texto).

text settings tabtext settings tabtext settings tab

Aquí puedes optar por agrandar o reducir tu texto, o bien especificar un tamaño de fuente exacto para él. Yo he aumentado el tamaño de la fuente a medium (medio):

medium font sizemedium font sizemedium font size

Podrías aumentarlo aún más y hacerlo enorme, pero ten cuidado para no ocasionar que tu sitio se vea desordenado.

Alternativamente, selecciona un tamaño de fuente específico y asegúrate de usar ese valor para todos tus bloques que tengan fuentes más grandes o más pequeñas a lo largo de tu sitio.

Finalmente, haz clic en Update (Actualizar) para actualizar tu entrada o en Publish (Publicar) para publicarla. Eso guardará tus cambios.

Cómo usar una clase CSS para cambiar el tamaño de la fuente

Si quieres asegurarte de que todos tus bloques que tengan texto más grande sean del mismo tamaño, y no quieres tener que recordar el tamaño que usaste, puedes emplear una clase CSS para asignar un tamaño de fuente consistente a todos los elementos que tengan esa clase.

Localiza tu bloque de texto nuevamente, y en el panel Block (Bloque), abre la pestaña Advanced (Avanzado).

advanced tabadvanced tabadvanced tab

En el campo Additional CSS class(es) (Clase(s) CSS adicionales), escribe una clase CSS. Yo voy a usar text-large:

adding a CSS class to a blockadding a CSS class to a blockadding a CSS class to a block

Ahora haz clic en Update (Actualizar) o en Publish (Publicar) para guardar tu entrada.

Ahora tienes dos opciones para editar el tamaño de los bloques que estén usando esa clase:

  • Agregar el estilo en el personalizador
  • Agregar el estilo a la hoja de estilo de tu tema

Estilizar la clase en el personalizador es la forma más sencilla de hacerlo, además de que no te causará ningún problema cuando actualices tu tema.

Ve a Appearance > Customize (Apariencia > Personalizar) en el administrador de WordPress y haz clic en Additional CSS (CSS adicional).

customizercustomizercustomizer

En el panel Additional CSS (CSS adicional), escribe lo siguiente para agrandar tu texto:

1
.text-large {
2
 font-size: 1.2em;
3
}

El uso de ems en lugar de un tamaño de fuente específico ocasionará que ese texto sea 1.2 veces el tamaño de un párrafo normal.

CSS in customizerCSS in customizerCSS in customizer

Haz clic en el botón Publish (Publicar) para guardar tus cambios.

Ahora ve a tu entrada en tu sitio en producción, y verás que tu bloque que tiene la clase text-large es más grande que el texto que lo rodea:

larger text in front end of sitelarger text in front end of sitelarger text in front end of site

Si quieres aumentar más el tamaño, simplemente edita el CSS en el personalizador. Ahora, cada vez que quieras incrementar el tamaño de un bloque, simplemente debes asignarle esa clase y el tamaño de la fuente será modificado por ti.

Cambiando el tamaño de la fuente en la hoja de estilo de tu tema

Los dos métodos que te he enseñado no requieren que edites los archivos de tu tema ni que tengas una comprensión profunda de CSS. Además, te brindan una forma rápida de cambiar el tamaño de la fuente en WordPress.

Pero si quieres editar el tamaño de los elementos existentes en tu sitio (por ejemplo todos los párrafos o listas), o si quieres agregar CSS en la hoja de estilo en vez de hacerlo en el personalizador, necesitarás editar la hoja de estilo de tu tema.

Puedes obtener más información sobre cómo editar tu hoja de estilo en nuestra guía para agregar CSS personalizado a tu sitio de WordPress. Si quieres profundizar más, este es un excelente lugar para comenzar.

Conclusión

Cambiar el tamaño de la fuente del texto en tu sitio de WordPress puede ser cuestión de minutos. Puedes editar el tamaño de la fuente de un bloque directamente, o asignarle una clase y luego escribir CSS para esta última.

Independientemente del método que utilices, úsalo con moderación para obtener el máximo efecto y asegúrate de no terminar con un sitio de apariencia desordenada y poco profesional.

Embellece tu sitio con un tema profesional de WordPress

¿Estás en el proceso de darle un cambio de imagen a tu sitio web de WordPress? Nuestra colección de temas de WordPress diseñados profesionalmente pueden darle a tu sitio web una apariencia completamente nueva en cuestión de minutos.

Estos son algunos de los temas de WordPress mejor vendidos y más prometedores disponibles en ThemeForest para 2020.