Cómo cambiar la tipografía de tu plantilla WordPress

por | Sep 15, 2016 | Aprender WordPress

cambiar la tipografía de tu plantilla WordPress


Todo el que haya iniciado un proyecto web a través de WordPress sin tener muchos conocimientos de código web, habrá optado por descargar una plantilla o tema. Sin embargo, no creo que queráis que vuestra web sea idéntica a otras páginas.

Cambiar la tipografía de tu plantilla WordPress no es tan difícil, sobretodo con la completa guía que te voy a hacer. ¿Pero cómo hacerlo sin conocimientos previos de código?

Si le queréis dar más carácter y personalidad, no hay nada mejor que empezar por las tipografías; muchos dicen que son el alma de un diseño.

Vamos a ver, paso a paso, las opciones que tienes para realizar un “lavado de cara” a los títulos y textos de tu plantilla WordPress.


Plugins para cambiar tipografía WordPress

Como mencionamos anteriormente, es muy fácil cambiar la fuente en WordPress utilizando distintos plugins, de entre los cuales te recomendamos usar Easy Google Fonts.

Este plugin es la mejor opción para los usuarios que no tienen ningún conocimiento sobre los lenguajes de programación de WordPress y no quieren editar códigos. Gracias a él no tendrás que acceder al servidor de WordPress ni hacer ningún cambio que requiera de conocimientos específicos.

Lo que hace este plugin es que te permite cambiar la fuente de forma casi automática. Puedes entrar en el catálogo de fuentes gratuitas de Google de forma muy sencilla para probar todas las tipografías que están disponibles hasta encontrar aquella que se ajuste mejor al estilo del proyecto.

Para utilizar este plugin lo único que tienes que hacer es entrar en el escritorio de administrador de WordPress y dirigirte a la pestaña de “Apariencia” > “Personalizar” para poder cambiar las fuentes de los distintos elementos de tu sitio web, como es el caso de las fuentes.

El lado negativo de este plugin es que el número de tipografías es limitado, aunque es cierto que nos ofrecen un gran catálogo y lo más seguro es que encuentres una que se adapte a tus necesidades. Además, sólo te permite cambiar la fuente de los títulos y subtítulos (H1, H2, H3, H4, etc.) de forma automática, lo que quiere decir que todos los títulos de tu sitio tendrán la misma configuración de fuente.

Otros plugins

El catálogo de plugins para WordPress es bastante amplio y muchos de ellos pueden tener justo lo que necesitas para usar una fuente personalizada o premuim en tu diseño de forma muy rápida y cómoda.

Como ya mencionamos, es común que estos plugins te pidan modificar ciertas líneas de código en WordPress o en tu hosting, pero la mayoría explica cómo hacerlo y te guiarán a lo largo del proceso, haciendo que todo el proceso para cambiar fuente WordPress sea sencillo y rápido.

Te invitamos a comparar y a analizar las funciones de los distintos plugins disponibles para que puedas encontrar uno que cumpla con tus necesidades y exigencias.


Servidores de tipografías: un inmenso catálogo a tu alcance

Sé que suena muy bien, pero lo malo de este servicio es que tiene un coste algo elevado que probablemente autónomos o pequeñas empresas no querrán asumir.

Sin embargo, para empresas con varias webs alojadas, o para estudios de diseño que crean muchos proyectos web, los servidores de tipografías más conocidos, como Adobe Typekit, fonts.com o typography.com, permiten acceder a un amplísimo catálogo de fuentes comerciales de forma fácil y rápida.

Para hacer uso de ellos debes pagar una suscripción mensual o anual, y con un simple plugin o un código JavaScript o CSS que el propio servidor te proporciona, se puede usar cualquiera de las tipografías disponibles; se cargan directamente a tu página web desde los servidores de cada proveedor, con lo cual te ahorras el tener que subirlas a tu propio servidor de forma manual.

Pero si lo que quieres es usar la fuente que te apetezca y sin pagar… atento a la siguiente opción.


Cambiar tipografía sin plugins: cargar tus propias tipografías a WordPress

Esta es la opción para cambiar la tipografía de una plantilla WordPress que más libertad de personalización te ofrece sin tener que gastarte ni un duro o muy poco dinero por el camino.

Se trata de descargar la fuente que más te guste de Internet y cargarla tú mismo al servidor de WordPress. Personalmente me gusta usar myfonts.com porque tienen un catálogo de fuentes espectacular.

El único incordio de este método es que debes tomarte las molestias de subir los archivos y, además, deberás escribir código CSS para aplicar las tipografías en tu web.

Pero no te preocupes, te lo he puesto todo muy fácil para que puedas llevar a cabo la hazaña sin tener muchos conocimientos previos de CSS, o incluso sin que hayas accedido nunca antes al servidor de WordPress.

Vayamos paso por paso:


PASO 1. Elegir y descargar la tipografía

En este paso te recomiendo que tengas en cuenta dos cosas:

Lo más probable es que en los títulos de la web nunca llegues a usar los estilos de cursiva o negrita de la tipografía; además puedes añadir esas características a través del código CSS. Así que lo más inteligente es que te descargues la versión básica o “regular” de la fuente, ya que suele estar disponible de forma gratuita.

Para textos más largos es conveniente tener todos los estilos de la fuente y lo más probable es que entonces tengas que pagar por el pack. Elige sabiamente.


Elegir y descargar la tipografía



PASO 2. Cargar los archivos de la tipografía a WordPress

Para los que nunca hayáis accedido a los archivos de WordPress debéis saber que necesitaréis descargar un programa FTP, como FileZilla, que os de acceso al servidor de WordPress y a todos los archivos que hay en él; incluyendo las carpetas de vuestro tema, el código de la web, etc. FileZilla es bueno, bonito y barato; concretamente gratuito y, además, muy fácil de usar.

Vamos a ello:

Lo único que necesitarás para acceder al servidor son estos datos – si no sabes cómo encontrarlos, piensa que generalmente te los facilita tu proveedor de hosting en el perfil de tu cuenta- :

  • Nombre del dominio o subdominio
  • Dirección FTP
  • Nombre de usuario
  • Contraseña de acceso


Cargar los archivos de la tipografía a WordPress


Una vez has podido conectar con el servidor, debes encontrar la carpeta principal en la que se guardan todos los archivos del tema o plantilla que hayas instalado en tu web. Para darte una pista, dicha carpeta suele estar dentro de la ruta “wp-content / themes” y, por lo general, lleva el nombre del tema que has instalado.


Panel de Filezilla


Cuando hayas accedido debes encontrar otra carpeta en la que se guardan las fuentes o tipografías que vienen predeterminadas con el tema. Es posible que el archivo se llame simplemente “fonts”, aunque cada diseñador organiza los ficheros a su manera y no puedo darte una hoja de ruta exacta.

Para que te sea más sencillo encontrarla, piensa que dentro de ésta has de ver archivos con nombres terminados en .eot .ttf .woff o .svg. Estos tipos de archivo corresponden a los distintos formatos de tipografía que usa cada navegador web; un mismo formato no es compatible para todos los navegadores y por eso hay que instalarlos todos.


Formatos de fuentes


En esta misma carpeta es donde deberás colocar las fuentes que hayas descargado anteriormente. Únicamente has de pasar los archivos de tipo .eot .ttf .woff o .svg. Si no has encontrado ninguna carpeta con fuentes, puedes crear una tú mismo y colocarla donde quieras, aunque es aconsejable tenerlo todo en el mismo sitio.

Ahora que ya tienes los archivos de las tipografías subidos al servidor, solo te queda “explicarle” a tu plantilla o tema dónde se encuentran esos archivos para que pueda usarlos.

Para ello tendrás que acceder al archivo de estilos CSS original de tu tema, llamado “style.css” (a no ser que el diseñador tenga un sentido del humor extraño y haya puesto otro nombre). Puedes encontrarlo en el “Editor” que encontrarás en el menú “Apariencia” del administrador de WordPress.

Ahora vamos a añadir una nueva función de código al inicio del archivo CSS, colócala justo después de la información que verás sobre el tema y las licencias.


Editor de código de WordPress


La función en cuestión se llama @font-face y servirá para indicarle a tu web dónde está el origen del archivo de la tipografía que vas a usar. Si has instalado más de una fuente, deberás hacer lo mismo para cada una de ellas por separado.

Te dejo una plantilla del código; puedes copiarla y pegarla cambiando los atributos en rojo:

@font-face{     font-family: 'nombre de la fuente';     src: url('ruta del archivo/ nombre del archivo.eot');     src: url('ruta del archivo/ nombre del archivo.eot') format('embedded-opentype'),url('ruta del archivo/ nombre del archivo.woff2') format('woff2'),url('ruta del archivo/ nombre del archivo .woff') format('woff'),url('ruta del archivo/ nombre del archivo .ttf') format('truetype'); }

Como ves, en rojo hay marcados los espacios en los que hay que indicar la ruta y el nombre de cada uno de los tipos de archivo: .eot .woff .woff2 y .ttf. Ambos datos los puedes ver en FileZilla:


Ruta del archivo en Filezilla


Para verlo más claro, así es como quedaría el código con datos reales en base al ejemplo que te he puesto arriba:

@font-face{     font-family: 'DreamOrphanageRg-Regular';     src: url('genericons/font/31F4B4_0_0.eot');     src: url('genericons/font/31F4B4_0_0.eot') format('embedded-opentype'),url('genericons/font/31F4B4_0_0.woff2') format('woff2'),url('genericons/font/31F4B4_0_0.woff') format('woff'),url('genericons/font/31F4B4_0_0.ttf') format('truetype'); }


PASO 3. Establecer con CSS la tipografía de cada elemento de la web

Estamos ya en el último paso para cambiar la tipografía de una plantilla WordPress.

Llegados a este punto ya tenemos las tipografías cargadas al servidor y lo único que nos queda es indicar, mediante código CSS, qué títulos, textos o elementos de nuestra web queremos que aparezcan con esas tipografías.

Para los que nunca hayáis tocado CSS, o no tenéis mucha experiencia con el lenguaje, os dejo un breve resumen de cómo hacerlo:

  1. Desde tu navegador, haz clic derecho en los títulos o textos a los que quieres aplicar las nuevas tipografías y selecciona la opción “Inspeccionar elemento”.

    Ahora deberás anotar el nombre o atributo del elemento html que has seleccionado. Para que te resulte más sencillo echa un vistazo a estas imágenes:


  2. Cambios con el Inspector de Elementos del navegador


    Tanto encima del elemento que selecciones, como en la parte derecha del Inspector, te aparecerá el atributo de dicho elemento; es decir, su “código”, por decirlo de algún modo, para ser reconocido y que debes usar para especificar las nuevas reglas de CSS que le vas a aplicar.

    En el caso que hemos puesto como ejemplo, vemos que el atributo es “h1.uk-heading-large”.

  3. Ahora dirígete al Editor CSS de WordPress y escribe en él las nuevas reglas de estilo. Te dejo una plantilla básica con los cambios esenciales que deberás aplicar a cada elemento, título o texto que quieras modificar:
  4. Atributo{ font-family: nombre de la fuente; font-size: tamaño de la fuente en unidad de medida rem o px; font-weight: estilo de la fuente ‘normal’ o ‘bold’; line-height: interlineado; }

    Así quedaría el código con valores reales:

    h1.uk-heading-large{ font-family: dream orphans; font-weight: bold; font-size: 6rem; line-height: 1.2; }

    Puedes ver el resultado final en esta imagen:


Resultado de los cambios con el Inspector de Código


¡Y voilà! Ya tienes tipografía nueva.

Espero que esta guía para cambiar la tipografía de una plantilla WordPress te sea de ayuda a la hora de darle el “toque” final y personal a tu página web.

Recuerda que los detalles marcan la diferencia, ¡no los subestimes!