7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Cómo cambiar la fuente en WordPress

Scroll to top
Read Time: 6 mins

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

En este tutorial aprenderás cómo cambiar las fuentes en WordPress. Te mostraré un par de formas diferentes en las que puedes hacerlo, ¡así que comencemos!

Cambiando la fuente en WordPress

Alterar la tipografía es una gran forma de cambiar la apariencia y, de hecho, la personalidad completa de tu sitio de WordPress.

El par de fuentes de Twenty Twenty para WordPress

En el tema predeterminado actual que viene con WordPress (Twenty Twenty) verás un tipo sans serif fuerte usado para los encabezados (el tipo de letra Inter, de Rasmus Andersson) y una serif (Hoefler Text, Garamond) para la totalidad del cuerpo. Es un par de fuentes simple pero impresionante.

default fonts in Twenty Twenty themedefault fonts in Twenty Twenty themedefault fonts in Twenty Twenty theme

Estas se ven espectaculares, pero imaginemos que queremos alterar la tipografía de alguna manera. La primera forma en la que podríamos hacer eso es directamente en el CSS.

1. Edita las hojas de estilo del tema

Hay un par de formas diferentes de cambiar los estilos de un tema. La primera es haciéndolo directamente en la hoja de estilo del tema.

Editando el archivo de la hoja de estilo de un tema

Navega a la hoja de estilo de tu tema (en este ejemplo es wp-content > themes > twentytwenty > styles.css) y ábrela en un editor de código. Realiza los cambios de declaraciones de fuentes que necesites, por ejemplo:

Luego guarda y carga el archivo en tu servidor web de nuevo. Puedes editar los estilos que encuentres en tu archivo, o puedes agregar nuevas declaraciones CSS.

Nota: Te recomendamos que uses un tema hijo y que edites los archivos en tu sistema local antes de pasar al servidor web operativo.

Editando los estilos de un tema a través del administrador

Alternativamente puedes editar las hojas de estilo de un tema a través del administrador de WordPress. Ve a Appearance > Theme editor (Apariencia > Editor de temas) y abre el archivo styles.css desde la lista de archivos de la derecha.

En ambos casos descubrirás que tus cambios en el CSS funcionan, pero no son lo que llamaríamos mejores prácticas. Editar el archivo de un tema directamente puede causar problemas cuando dicho tema es actualizado.

2. Agrega estilos al personalizador de temas

Un enfoque alternativo es agregar las declaraciones de estilo nuevas a través del personalizador del tema. Ve a Customize (Personalizar, que se encuentra disponible a través del front-end o de la interfaz de usuario del administrador) y en la mayoría de los casos verás una opción llamada Additional CSS (CSS adicional).

Aquí puedes añadir todos los estilos personalizados que desees.

Add Styles to the Theme CustomizerAdd Styles to the Theme CustomizerAdd Styles to the Theme Customizer

Esta es una mejora con respecto a los métodos anteriores, ya que no estamos tocando los archivos originales del tema.

Nota: Estos estilos serán específicos del tema, por lo que si cambias el tema estos estilos no serán adoptados.

Cómo cargar fuentes de Google a WordPress

Hasta ahora hemos visto cómo puedes cambiar o agregar declaraciones de estilo a WordPress, y esos estilos que agregas ciertamente pueden cambiar la fuente de determinados elementos. Sin embargo, antes de que hagas eso necesitas asegurarte de que las fuentes en cuestión realmente hayan sido cargadas.

Agreguemos una fuente de Google como ejemplo. Ve a https://fonts.google.com/ y selecciona una fuente web que te guste (yo voy a elegir Lacquer).

Usa la declaración @import de CSS

Al seleccionar la fuente se me proporcionarán un par de opciones para incluirla en mis páginas web, por ejemplo el uso de la declaración @import de CSS.

Lacquer on Google fontsLacquer on Google fontsLacquer on Google fonts

Esta instrucción import (sin las etiquetas <style>) puede ser añadida a tu sitio web usando los métodos que hemos discutido, por lo que la fuente se carga cuando se procesa la hoja de estilo.

Una vez hecho esto, podemos usar font-family: "Lacquer"; para cualquier selector que elijamos, por ejemplo el h1:

lacquer google font on wordpress themelacquer google font on wordpress themelacquer google font on wordpress theme

Como siempre, existe una advertencia; el uso de la instrucción @import en tu CSS es, nuevamente, un método mal visto, ya que ralentiza la carga de recursos cuando está en progreso.

Usa la etiqueta link de HTML

Sería mejor usar las opciones HTML que Google Fonts nos proporciona, por ejemplo la etiqueta <link>, que podemos colocar en el archivo head.php de nuestro tema.

Cómo cargar tus propias fuentes web a WordPress

Google Fonts es un excelente servicio, ya que aloja los archivos de fuentes por ti, dejándote la simple tarea de crear vínculos a ellas desde tu sitio web. Pero ¿qué pasa si compras tus propias fuentes web? Entonces necesitas alojarlas tú mismo y cargarlas a tu sitio a través de CSS.

Psst: ¡Hay miles de fuentes web en Envato Elements!

Envato Elements tiene miles de fuentes web, todas las cuales puedes descargar y usar con una sola suscripción: ¡regístrate y échales un vistazo!

thousands of web fonts on elementsthousands of web fonts on elementsthousands of web fonts on elements
Fuentes web en Elements

Una vez que hayas descargado tu fuente necesitas cargar los archivos a tu servidor, ya sea en tu carpeta de temas, o tal vez en una carpeta nueva llamada fonts (fuentes) en la carpeta wp-content.

Luego, usando una declaración @font-face de CSS (que puedes agregar en algún lugar de tu hoja de estilo, incluso en la parte inferior) puedes hacer referencia a los archivos de fuentes.

Esa es una declaración @font-face en su forma más simple. Ahora necesitas cambiar la fuente en el elemento que desees, tal como lo hemos hecho antes. Para obtener más detalles sobre el funcionamiento de @font-face, consulta este tutorial:

La forma recomendada de cargar fuentes a WordPress

Habiendo cubierto todos estos métodos, en realidad solo hay uno que se recomienda al 100%: poner en cola. La puesta en cola es un proceso mediante el cual los recursos pueden ser cargados por WordPress de manera segura (libre de conflictos) y organizada, así que veamos cómo funciona eso.

Tenemos el URL de nuestra fuente proveniente de Google Fonts, así que vamos a agregarlo a nuestro archivo functions.php. Nuevamente, puedes hacer esto en un editor de código y editar el archivo del tema en sí, o puedes hacerlo desde el interior del editor del área de administración de WordPress.

Agrega lo siguiente en la parte inferior del archivo:

Una vez que se guarde, nuestra fuente se cargará (correctamente) y estará lista para ser usada en nuestros cambios en el estilo CSS.

3. El método más sencillo: usa un complemento de WordPress

Hasta ahora nuestros métodos de edición y carga de fuentes no han sido complicados, pero quizá no sean la manera más sencilla de hacer las cosas para alguien con poca o nada de experiencia escribiendo código. Si prefieres no tocar ningún código, existe un complemento de WordPress para ti: Easy Google Fonts.

Ve a Plugins > Add New (Complementos > Agregar nuevo) y busca Easy Google Fonts. Cuando lo encuentres, instálalo y luego actívalo.

Ahora, cuando vayas a tu personalizador verás una nueva pestaña llamada Typography (Tipografía), que te permite alterar la fuente y todas las demás configuraciones de tipo para cada clase de elemento tipográfico en tu sitio web.

type settings wordpresstype settings wordpresstype settings wordpress

Conclusión

¡Así es como puedes cambiar la fuente en WordPress! No olvides que hay varias formas de hacerlo: algunas requieren que edites el código tú mismo, algunas son mucho más recomendables que otras, y para el enfoque más fácil existe un complemento de WordPress que hace el trabajo pesado por ti.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.