Cómo cambiar tipografía en WordPress ( 2022 )

Muchas veces necesitamos modificar la tipografía en WordPress y con ello nos encontramos con la engorrosa tarea de buscar un complemento que no consuma una barbaridad de recursos en nuestro servidor.

Cambiar la tipografía en WordPress puede resultar más sencillo sin complementos de lo que puede parecer a simple vista. Pero¿cómo empezar a gestionar todo el cambio de tipografías? ¿Dónde buscamos estas tipografías?

A continuación, veremos paso a paso qué podemos hacer para que nuestro WordPress o nuestra instalación de WordPress +Divi tenga nuevas tipografías que podamos utilizar.

  Servidores de tipografías para usar en WordPress

---

Como mencionamos previamente, la búsqueda de tipografías para usar en WordPress es el primer punto para comenzar a trabajar en el cambio tipográfico de nuestro sitio web. Podemos encontrar variedades de páginas que ofrecen este servicio, tanto opciones pagas como lo son, entre otras que podemos encontrar a lo largo del internet.

También podemos encontrar tipografías para WordPress gratuitas que nos hacen más fácil el trabajo de seleccionar una fuente que se visualice de forma correcta en nuestros sitios sin problema. Algunas páginas donde encontrar opciones gratuitas son Dafont y, la más sencilla a la hora de hacer cambios en tipografías, Google Fonts.

Descargar fuentes de Google:

---

Para búsquedas de tipografías en Google se puede ingresar a Google Fonts. Una vez dentro del sistema de Google, es tan fácil como seleccionar una de las tipografías que te aparecen o, si conoces el nombre de la fuente, utilizar el buscador en la parte superior:

En la sección “Categoría”, podemos filtrar aspectos básicos de la fuente que queremos buscar como, por ejemplo, si esta fuente es serif, sans serif, display, handwritting, etc.

Por otra parte, se puede seleccionar el lenguaje nativo de esta fuente, si se necesita incorporar algún idioma extranjero, y sus propiedades, tales como grosor, altura, anchura, etc.

Una vez seleccionada la fuente de WordPress ideal para nuestro proyecto, la descargamos para poder utilizarla en nuestro sitio bajo el método de incrustación directa en nuestro servidor. Para ello, al ingresar a nuestra fuente elegida, nos mostrará varias opciones.

Aquí podemos visualizar un botón con la acción para descargar dicha familia de fuente. La familia son las versiones que poseen las tipografías como, por ejemplo, bold, regular, y cursiva, entre otras.

Descargar fuentes de otros sitios web

---

Esto dependerá del sitio utilicemos, pero los conceptos básicos serán los mismos. Por ejemplo, si ingresamos a Dafont, veremos muchas opciones para seleccionar el tipo de fuente que queremos. Está algo menos organizado que Google Fonts, pero es igualmente beneficioso en el momento de seleccionar nuestra tipografía.

Aunque si lo prefieres puedes ver este tutorial sobre Google Fonts en WordPress.

Igual que en Google Fonts, tenemos botones para descargar la fuente tipográfica. Una vez la seleccionemos, basándonos en los criterios superiores o bien identifiquemos una que nos guste, podemos descargarla mediante el botón que lo indica.

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 panel de administración 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 WordPress, 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.

  Cambiar tipografía de WordPress sin plugins

---

Una vez tengamos nuestra tipografía seleccionada y descargada, podemos pasar a siguiente paso: subirla a nuestro servidor para que sea asimilada por nuestro sitio directamente dentro de nuestros archivos y de forma que nuestro sitio los tome de forma más efectiva.

Esto podemos hacerlo de dos maneras: mediante subida de archivos por FTP o por medio de nuestro cPanel.

Acceder a nuestro servidor por medio de FTP

Con esta opción, es recomendable que utilices un gestor FTP o programa de transferencia FTP. Uno de los más utilizados, que también es gratuito, es FileZilla. Con este programa puedes tener acceso a las carpetas del servidor y es compatible con Windows, Linux y macOS, lo que lo hace una herramienta bastante completa y accesible para el traspaso de contenido.

Para elaborar la conexión necesitarás los datos de conexión FTP. Estos datos constan de:

Servidor: nombre del dominio o subdominio al cual se conectará el programa

Puerto: puerto asignado para conexión FTP (opcional)

Modo de acceso: seleccionamos “normal” para poder ingresar manualmente el usuario y la contraseña que tengamos para el acceso del servidor

Usuario: usuario creado para permitir el acceso al servidor

Contraseña: clave específicamente creada para el usuario previamente creado

 Acceder a nuestro servidor por medio de cPanel

---

Una vez dentro, podemos entrar al área de administración de archivos ubicado en la parte superior bajo el mismo nombre:

Ahí encontraremos una interfaz parecida al FTP con las carpetas, a las que podemos ingresar haciendo clic sobre las áreas correspondientes.

 Subir archivos a nuestro servidor

---

Una vez nos conectamos satisfactoriamente a nuestro servidor, veremos todas las carpetas asociadas tanto a nuestros dominios principales como subdominios o carpetas temporales. Así que, lo primero, una vez conectados, será identificar dónde vamos a subir nuestras fuentes.

Generalmente, utilizamos nuestro dominio en la raíz de nuestro servidor, por lo que es posible que encuentres la carpeta wp-content/tema_utilizado dentro de Public_Html. De no ser así, debes ingresar a la carpeta en la que se esté visualizando tu sitio web y luego ingresar a la carpeta de este contenido.

Es posible que según tu tema ya poseas una carpeta dedicada a fuentes bajo el nombre de Fonts. De no ser así, puedes crearla sin ningún problema, aunque es recomendable hacerlo directamente dentro del Tema, para que esté todo más organizado. Como esta carpeta sería nueva, puedes asignarle el nombre que desees.

Los comprimidos con las tipografías suelen tener archivos con extensiones .eot, .woff, .svg o .ttf, siendo este último la más común entre descargas tipográficas.

Una vez tengas estos archivos subidos a tu servidor en la carpeta correspondiente (creada por ti o por defecto del Tema), solo debes indicarle al Tema dónde se encuentran estas tipografías para que puedas utilizarlas en tu sitio.

Para insertar dicho código y que sea reconocido por tu WordPress puedes ingresar un código tanto en el archivo style.css, ubicado en la misma ruta de tu Tema en los archivos FTP o cPanel, como ingresando a Apariencias > Editor de temas, editando el CSS de WordPress desde el propio panel de administación.

En ambos casos nos encontraremos con un archivo en el cual debemos insertar un código en la parte superior del mismo luego de la descripción general.

@font-face {

font-family: nombre-de-la-fuente;

src: url(https://dominio/carpeta_de_dominio(en caso de tenerla)/wp-content/themes/tu tema/fuentes/ nombre_de_la_fuente.ttf);

}

Con este código le estamos indicando el nombre de la fuente que estamos utilizando y la ruta específica donde subimos nuestro archivo de fuente. Por ejemplo, si la hemos subido a wp-content/tutema/fuentes/ la ruta que debemos ingresar sería:

http://dominio/carpeta_de_dominio(en caso de tenerla)/wp-content/themes/tu tema/fuentes/ nombre_de_la_fuente.ttf

  Cargar tipografía mediante CSS en WordPress

---

Una vez tenemos identificado por el sistema y tu tema como se llamará y de dónde se tomará la fuente tipográfica nueva, es el momento de elegir dónde deseamos que se visualice dentro de nuestro sitio. Para ello vamos a utilizar una herramienta que poseen todos nuestros exploradores que nos ayudará a verificar los códigos a ingresar al WordPress para que sea asimilado.

Al ingresar a nuestro sitio e identificar el elemento que deseamos modificar en fuente tipográfica, procedemos a hacer clic derecho sobre él y luego hacemos clic en Inspeccionar elemento. Al hacer esto, nos mostrará todo el código referente al área en la que hicimos clic.

Veremos que el título de la sección o en lo que hemos hecho clic es un H1, por lo que para agregar el texto debemos ingresar el código respectivo a este H1:

h1 {

font-family: nombre_de_la_fuente;

}

Igualmente, si quisiéramos cambiarla para los textos de la web, es decir los P podríamos ingresar un código como este:

p {

font-family: nombre_de_la_fuente;

}

En ciertos casos, tenemos una clase en específico, por ejemplo:

Vemos que el botón de ver opciones y contratar posee una clase, por lo tanto, también podríamos aplicar la fuente a esta clase en particular:

a.et_pb_button.et_pb_custom_button_icon.et_pb_button_0.et_hover_enabled.et_pb_bg_layout_dark {

font-family: nombre-de-la-fuente !important;

}

Como podemos ver, todo quedaría en poder inspeccionar el elemento que deseamos modificar y posterior a esto agregar la misma estructura de código CSS solamente incorporando la opción de Font-family para mantener la selección de tipografía que hemos subido a nuestro servidor.

  Cambiar tipografía personalizada desde Divi

---

A diferencia del arduo proceso que tenemos que realizar en una instalación que no posee Divi, esta es mucho más sencilla:

1. Abre una publicación (página o artículo) en el Divi Builder e insertar un módulo de texto. También se puede hacer clic en el icono de la herramienta en un texto ya creado en la web.
2. Ingresa a la pestaña Diseño donde se verán todas las opciones pertinentes al diseño del texto.
3. Abre el desplegable correspondiente al Texto.
4. Haz clic en el botón de texto fuente.
5. En este desplegable, haz clic en el botón de “subir”. De esta forma, el sistema nos permitirá seleccionar la fuente a incorporar y que previamente hemos descargado.
6. Selecciona un nombre para dicha fuente.
7. Elige el archivo de extensión previamente mencionada .eot, .woff, .svg o .ttf
8. Sube el archivo y selecciona la fuente para poder visualizarla.

  Cambiar fuente por defecto por defecto en Divi

---

Otra opción que tenemos al seleccionar las tipografías, es elegir una en específico para todos los textos de nuestra web:

1. Entra a Apariencias > Personalizar para ingresar al personalizador por defecto de WordPress
2. Una vez dentro, ingresamos a ajustes generales
3. Dentro de los ajustes entramos a Tipografías
4. Una vez dentro, veremos entre las opciones Fuentes de la cabecera y Fuentes del cuerpo del texto
5. Por último, podemos seleccionar la fuente e incluso entre la primera opción puedes encontrar la fuente que previamente en el paso anterior se ha subido.

Problema que puede presentarse en momento de subir la fuente tipográfica en WordPress

A veces no se logra importar la fuente personalizada y muestra el mensaje:

“Lo siento, este tipo de archivo no está permitido por razones de seguridad”.

Para solventar este problema, puedes hacer un ajuste en el archivo Wp-config.php e insertar el código:

define('ALLOW_UNFILTERED_UPLOADS', true);

Este código iría justo antes del mensaje de bienvenida a WordPress. Para que sea asimilado antes del inicio del mismo, una vez ingreses la fuente, debes eliminar este código por motivos de seguridad en tu sitio web.

 Conclusión sobre cambiar de fuente en WordPress

---

Como hemos podido ver en esta guía no existe una sola forma o método de insertar nuestra fuente personalizada al sitio, sino que en algunas plantillas de WordPress funcionan a favor de este cambio, permitiéndonos agregar nuevas fuentes e incluso aplicarlas por defecto.

Así mismo tenemos a disposición variedad de páginas webs, donde podemos ver y descargar la fuente que nos guste para nuestro sitio con más facilidad, incluso pruebas de escritura con la misma. El poder cambiar nuestra fuente resultará de gran ayuda al momento de impregnar en el sitio nuestra marca.

Teniendo en cuenta lo visto en esta publicación, podremos aventurarnos en el uso de diferentes fuentes y mejorar nuestro sitio visualmente.