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 agregar fuentes nuevas a WordPress

Scroll to top
Read Time: 10 mins

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

¿Quieres que tu sitio web de WordPress se destaque de entre la multitud?

Las fuentes personalizadas son una manera de darle a tu sitio esa apariencia única que has estado anhelando, incluso si estás usando exactamente el mismo tema que usan una innumerable cantidad de sitios web de WordPress.

En este artículo, esta publicación, te mostraré cómo agregar fuentes nuevas a WordPress. Aún mejor, te mostraré cómo puedes tener a tu alcance miles de fuentes personalizadas gratuitas de dos de los repositorios de fuentes en línea más populares en Internet: Typekit de Adobe y Google Fonts.

Los mejores temas de WordPress en ThemeForest

Una excelente manera de lograr que tu sitio se vea hermoso es a través de un tema profesional de WordPress. Puedes encontrar miles de los mejores temas de WordPress alguna vez creados en ThemeForest.

¿En dónde puedo encontrar fuentes personalizadas gratuitas?

Aunque me enfocaré en Typekit y Google Fonts, existe una innumerable cantidad de sitios web que ofrecen fuentes personalizadas gratuitas. El proceso de agregar estas fuentes a tu sitio puede variar, pero a lo largo de este tutorial cubriré los métodos más comunes, incluyendo el uso de complementos y la edición del CSS de tu sitio web. Al final de este tutorial, contarás con técnicas que puedes aplicar a la mayoría de los repositorios de fuentes personalizadas, incluso si no se han cubierto de forma explícita en este tutorial.

Si ya tienes una fuente específica en mente, entonces vale la pena arrancar tu motor de búsqueda favorito y ejecutar una búsqueda con la frase fuente personalizada seguida por algunas palabras clave que describan tu fuente ideal, por ejemplo fuente personalizada Netflix o fuente personalizada Star Wars.

Si no tienes una fuente en particular en mente, Typekit y Google Fonts ofrecen miles de fuentes personalizadas, por lo que estos dos sitios deberían proporcionarte muchas opciones. Sin embargo, si has buscado en Typekit y Google Fonts y todavía no puedes encontrar una fuente que te llame la atención, FontSquirrel, 1001 Fonts y FontSpace también son excelentes sitios para encontrar fuentes personalizadas.

Pero no te dejes llevar, ya que saturar tu sitio web de fuentes de terceros puede afectar su rendimiento, y los sitios web que siempre están cambiando entre fuentes diferentes tienden a ser difíciles de leer, ¡además de ser desagradables para la vista!

Agregando fuentes de Google a WordPress

Por lo general, hay dos formas en las que puedes agregar fuentes nuevas a WordPress: usando un complemento dedicado, o editando el CSS de tu sitio web. En las siguientes secciones cubriré ambos métodos.

CSS: Agregando fuentes personalizadas de Google manualmente

La edición del CSS de tu tema es un proceso que involucra varios pasos, pero también es una de las formas más versátiles de importar fuentes nuevas:

Dirígete al sitio web de Google Fonts y encuentra una fuente que quieras usar. Luego haz clic en el enlace Select this font (Selecciona esta fuente).

Google Fonts contains hundreds of free fonts that you can add to your WordPress websiteGoogle Fonts contains hundreds of free fonts that you can add to your WordPress websiteGoogle Fonts contains hundreds of free fonts that you can add to your WordPress website

Ahora debería aparecer una ventana emergente llamada Family selected (Familia seleccionada) cerca de la parte inferior derecha de la pantalla. Haz clic en ella.

When the Family selected popup appears expand it by giving it a clickWhen the Family selected popup appears expand it by giving it a clickWhen the Family selected popup appears expand it by giving it a click

Asegúrate de que la pestaña Embed (Insertar) esté seleccionada, y copia el código de inserción proporcionado.

Inicia sesión en tu cuenta de WordPress en una pestaña separada.

  • En el menú de la izquierda de WordPress, navega a Appearance > Theme Editor (Apariencia > Editor de temas).
  • Abre el menú desplegable Select theme to edit (Seleccionar tema para editar), elige tu tema actual y luego haz clic en Select (Seleccionar).
  • En el menú Theme files (Archivos del tema), selecciona el archivo header.php.
  • Busca la etiqueta de apertura <head> y pega el código de inserción de Google Fonts directamente después de esta etiqueta.
  • Haz clic en Update file (Actualizar archivo) para finalizar la edición de tu tema.

Ahora que has agregado esta fuente a tu sitio web, necesitas definir en dónde debe usarla WordPress, por ejemplo, tal vez quieras usar la fuente de Google para el texto del cuerpo de tu sitio web o para todos los encabezados h1.

  • En el menú Theme files (Archivos del tema) de WordPress, encuentra el archivo style.css y haz clic en él. Ten en cuenta que, en algunos temas, style.css podría estar almacenado dentro de una carpeta CSS.
  • Regresa a tu pestaña de Google Fonts y selecciona @Import.
  • Copia el código Specify in CSS (Especificar en CSS).

Select the Import link which gives you access to some CSS codeSelect the Import link which gives you access to some CSS codeSelect the Import link which gives you access to some CSS code

Regresa a tu pestaña de WordPress y localiza la sección de código que represente el lugar en el que quieras usar esta fuente. Por ejemplo, si quisieras usar la fuente para el texto del cuerpo de tu sitio web, necesitarías localizar una sección de código que se vea más o menos así:

Este paso puede variar dependiendo de tu tema y del tipo de texto que quieras editar. Si tienes dificultades para determinar qué fragmento de código necesitas modificar, intenta abriendo el archivo style.css y haciendo una búsqueda de la frase font-family, ya que esto resaltará todo el código que controla la forma en la que se usan las fuentes a lo largo de tu sitio web.

Una vez que hayas identificado el fragmento de código correcto, necesitarás reemplazar font-family con el código specify in CSS (especificar en CSS) de Google Fonts. Por ejemplo, mi código specify in CSS (especificar en CSS) es:

Entonces necesito reemplazar font-family: 'Montserat' en el archivo style.css. Esto me da lo siguiente:

Una vez que hayas modificado el código, guarda tus cambios haciendo clic en Update File (Actualizar archivo). Actualiza tu sitio web de WordPress, y ahora debería estar usando tu nueva fuente. Ten en cuenta que si la fuente no cambia tras una actualización, entonces es posible que necesites borrar tu caché o ver tu sitio web en una pestaña de incógnito.

Agregando fuentes personalizadas usando el complemento de Google

Ya que cada tema de WordPress es único, editar los archivos CSS de un tema algunas veces puede ser un reto.

Si tienes problemas para determinar qué fragmento de código necesitas editar, o si simplemente no te gusta la idea de adentrarte en el CSS de tu sitio web, entonces puedes importar fuentes de Google usando el complemento Easy Google Fonts:

  • En el menú de la izquierda de WordPress, selecciona Plugins > Add New (Complementos > Agregar nuevo).
  • Busca el complemento Easy Google Fonts, y cuando aparezca, selecciona Install (Instalar) seguido por Activate (Activar).
  • A continuación, navega a Appearance > Customize (Apariencia > Personalizar).
  • Ahora tendrás acceso a un nuevo elemento llamado Typography (Tipografía). Haz clic en él.
  • Selecciona Default Typography (Tipografía predeterminada).
You can access Google Fonts entire library of free fonts by installing a dedicated pluginYou can access Google Fonts entire library of free fonts by installing a dedicated pluginYou can access Google Fonts entire library of free fonts by installing a dedicated plugin

Desplázate por el menú lateral hasta que encuentres la sección de texto que quieras editar, por ejemplo Heading 1 (Encabezado 1) o Paragraphs (Párrafos), luego abre el menú desplegable Font Family (Familia de fuentes) y elige la fuente de Google que quieras usar.

Una vez que hayas seleccionado tu fuente, puedes personalizarla usando las configuraciones de las pestañas Appearance (Apariencia) y Positioning (Posicionamiento), por ejemplo, quizá quieras cambiar el color, el tamaño o el espaciado de la fuente. Cuando estés satisfecho con tu nueva fuente, selecciona Publish (Publicar).

Ahora tu sitio web debería actualizarse para usar esta nueva fuente.

Agregando una fuente personalizada usando Typekit

Google Fonts no es el único lugar en donde puedes obtener acceso a fuentes personalizadas gratuitas. Veamos cómo puedes usar CSS para agregar cualquier fuente del repositorio Typekit de Adobe:

  • Ve al sitio web de Typekit y regístrate para obtener una cuenta.
  • Explora la biblioteca de Typekit, y encuentra una fuente que quieras agregar a tu sitio web de WordPress.
  • Haz clic en el botón Add to Web Project (Agregar a un proyecto web).
  • Asigna un nombre descriptivo a tu proyecto, y luego selecciona Save (Guardar).
  • Mueve el control deslizante Activate fonts (Activar fuentes) a la posición On (Activado).
Find a font you want to use and push its Active fonts slider into the On positionFind a font you want to use and push its Active fonts slider into the On positionFind a font you want to use and push its Active fonts slider into the On position

Ahora necesitarás copiar y pegar el código de inserción de esta fuente en la etiqueta <head> de tu sitio web. Para obtener el código de inserción, navega a My Adobe Fonts > Web Projects (Mis fuentes de Adobe > Proyectos web) o accede a la página de proyectos web directamente.

  • Encuentra el código de inserción proporcionado y cópialo sin ninguna de las etiquetas <style>.
  • Inicia sesión en tu cuenta de WordPress en una pestaña nueva.
  • En el menú de la izquierda de WordPress, selecciona Appearance > Theme Editor (Apariencia > Editor de temas).
  • Abre el menú desplegable Select theme to edit (Seleccionar tema para editar), elige el tema que estás usando actualmente, y luego haz clic en Select (Seleccionar).
  • En el menú Theme files (Archivos del tema), localiza el archivo header.php y haz clic en él.
  • Encuentra la etiqueta de apertura <head> y pega el código de inserción directamente después de esta etiqueta.
  • Haz clic en Update file (Actualizar archivo).
  • Vuelve a la pestaña Typekit y localiza el siguiente enlace: If you'd like to use fonts in HTML email, use the @import link (Si deseas usar fuentes en correos electrónicos HTML, usa el enlace @import). Haz clic en este enlace y luego copia el código de importación proporcionado.
  • Regresa a WordPress. En el menú Theme Files (Archivos del tema), selecciona style.css.
  • Pega el código de inserción al inicio del archivo style.css.
Add custom fonts to your website by editing your stylecss fileAdd custom fonts to your website by editing your stylecss fileAdd custom fonts to your website by editing your stylecss file

Guarda los cambios que le hiciste al tema haciendo clic en Update File (Actualizar archivo).

Ahora necesitas encontrar el código que define a la fuente que quieres cambiar, y actualizarlo para que, en su lugar, haga referencia a tu fuente de Typekit.

Este proceso variará dependiendo del tema que estés usando y del texto que quieras actualizar, pero por lo general deberás llevar a cabo los siguientes pasos:

  • En el menú Theme Files (Archivos del tema) de WordPress, selecciona el archivo style.css.
  • Encuentra la sección de código que necesitas actualizar; una vez más, puede ser útil buscar la frase font-family, ya que esto resaltará todo el código de tu tema que esté relacionado con la fuente.
  • Una vez que hayas identificado la sección de código correcta, necesitarás el CSS para tu nueva fuente de Typekit. En una pestaña nueva, dirígete a la sección Active Fonts (Fuentes activas) de Typekit (o navega a My Adobe Fonts > Active Fonts (Mis fuentes de Adobe > Fuentes activas)).
Head over to the Adobe Typekit website and navigate to My Adobe Fonts Active FontsHead over to the Adobe Typekit website and navigate to My Adobe Fonts Active FontsHead over to the Adobe Typekit website and navigate to My Adobe Fonts Active Fonts
  • Localiza la fuente que quieras usar en tu sitio web y haz clic en ella.
  • Desplázate a la parte inferior de la página de la fuente; la sección How to Use (Cómo se usa) debería contener un código web. Copia la sección font-family.
  • Regresa a tu pestaña de WordPress, y reemplaza la línea font-family con la línea que acabas de copiar.
  • Cuando estés satisfecho con tus cambios, haz clic en Update File (Actualizar archivo).

Revisa tu sitio web; ¡ahora debería estar usando tu nueva fuente!

Conclusión

En este tutorial, te mostré cómo personalizar cualquier tema de WordPress usando el interminable suministro de fuentes gratuitas disponible en línea.

Si has estado siguiendo los pasos, entonces ahora tienes las bibliotecas completas de Google Fonts y Typekit para elegir. Sin embargo, si quieres descargar una fuente de alguien que no sea Adobe o Google, entonces deberías poder obtener resultados similares encontrando el código de inserción de esa fuente y pegándolo en los archivos de tu tema de WordPress, siguiendo las instrucciones descritas en este artículo. Muchos repositorios de fuentes grandes también tienen complementos dedicados que permiten que sea más fácil agregar fuentes a tu sitio web, por lo que siempre vale la pena revisar si hay algún complemento disponible.

Dale un cambio de imagen a 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 puede 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.


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.