¿Cómo subir fuentes personalizadas a Divi?

Si tenemos que hablar de aspectos fundamentales dentro de nuestra página web, sin duda, no podemos olvidarnos de las tipografías. Gracias a ellas, podemos conseguir transmitir nuestra imagen de marca y crear una cohesión visual dentro de todo nuestro sitio. Por ello, en este post me encargo de explicarte cómo puedes subir fuentes personalizadas con Divi.

¡Vamos!

También te puede interesar:
¿Cómo instalar Divi en WordPress?
¿Cómo instalar WordPress en pocos pasos?
¿Por qué tener tu página web en WordPress es la mejor opción?
El timo del 40% de descuento de Divi [Comprar DIVI a PLAZOS]

Tipografías: ¿Qué tipos hay?

Las tipografías son la representación gráfica de las letras que vemos en cualquier texto y son algo vital para cualquier diseño o elemento que las contenga. Por eso, antes de elegir una tipografía, debe de haber una investigación previa sobre ella.

Aunque hay muchos tipos de tipografías diferentes, en este post vamos a ver los 4 grupos más importantes:

• Serif

• Sans-serif

• Script

• Decorativas

Serif

Las fuentes serif son aquellas que contienen remates o adornos al final de las letras. Estas decoraciones de la tipografía se conocen como serifa.

Este tipo de fuentes se suele utilizar para textos más serios y tradicionales. A su vez, también son adecuadas para párrafos ya que facilitan la lectura dentro de un sitio web, revista, etc. Un ejemplo de esta tipografía sería la fuente Times New Roman.

Sans-Serif

A diferencia de las fuentes Serif, este tipo de fuentes no contienen serifas, haciendo que sean consideradas como tipografías de palo seco.

Este tipo de fuentes suelen estar más dedicadas a sectores comerciales o publicidad por la ausencia de seriedad que transmiten en comparación con las fuentes serif. A su vez, también se recomienda en textos que se puedan leer en pantalla pequeñas. Entre los muchos ejemplos de fuentes sans-serif podemos encontrar las fuentes Calibri o Arial.

Scripts

Apuestan por motivos caligráficos o manuscritos. Debido a su creatividad y elegancia, suelen utilizarse en textos cortos o para decorar títulos o subtítulos. Además, existen diferentes tipos de categorías dentro de esta familia como las fuentes brush, gráficas, etc.

A su vez, debido a su forma, no están recomendadas para párrafos ya que no facilitan su lectura en textos reducidos.

Decorativas

Las tipografías decorativas son fuentes que se han creado con motivos especiales. Estos pueden ser, por ejemplo, para una campaña en concreto o frases publicitarias. Son fuentes que suelen tener una gran creatividad y personalidad detrás.

Al igual que la tipografía scripts, no están recomendadas para párrafos.

¿Dónde puedo encontrar fuentes?

Para poder encontrar las fuentes adecuadas a nuestro proyecto, es importante que acudamos a sitios web especializados y que revisemos siempre los derechos de autor de las diferentes fuentes.

Dentro de estas páginas web podremos encontrar una gran variedad de fuentes gratuitas y también de fuentes con licencia. La diferencia principal entre ambas es que en las fuentes con licencia deberemos pagar una cierta cantidad para poder utilizar esa tipografía. Sin embargo, si estamos eligiendo una fuente gratuita, también debemos revisar si podemos utilizarla para uso comercial. En muchas ocasiones, aunque sean fuentes aparentemente gratuita, puede que solo sea para uso personal y podríamos meternos en un problema si la usamos para nuestros objetivos de negocio.

Para poder encontrar tus fuentes puedes utilizar páginas como Dafont o Font Squirrel entre muchas otras.

Formatos de fuentes: OTF y TTF

Antes de empezar a subir fuentes personalizadas a nuestro WordPress con Divi, debemos revisar el tipo de formato que presenta nuestra fuente. Esto es importante porque es la manera que tendrán los navegadores de poder leer tu contenido. Por ello, siempre es recomendable que estén los dos formatos más compatibles para cualquier navegador web:

• OTF (Open Type Font)

• TTF (True Type Font)

En caso de que tu fuente no tenga ninguna de estas dos extensiones, tendrás que usar un convertidor de fuentes. En él, tendrás que subir tu fuente y darle al botón de convertir para poder generar los formatos deseados. Aunque existen muchos convertidores en internet, mi recomendación es que utilices la página web de Convertio.

¿Cómo subir fuentes personalizadas a Divi?

Una vez que ya hemos elegido nuestra fuente, tenemos el formato correcto y la hemos descargado, ya podríamos subir nuestra fuente personalizada a Divi.

Vamos a ver cómo podemos hacerlo:

Utilizar el constructor de Divi para subir nuestra fuente

Para poder subir nuestra fuente, la manera más sencilla es utilizar el propio constructor de Divi:

1. Lo primero que debemos hacer es irnos a nuestro constructor de Divi, creando o abriendo cualquier página o artículo de nuestra página web.
2. Insertamos un módulo de texto.
3. Iremos a los ajustes de nuestro texto/diseño.

4. Seleccionamos el apartado fuentes y se nos desplegarán una serie de fuentes que contiene ya Divi. En nuestro caso, haremos click al botón de subir “subir”.

5. Agregamos los archivos de nuestra fuente. Recuerda, el formato siempre debe ser TTF u OTF.

6. A su vez, también puedes darle un nombre a tu fuente para poder recordarla siempre.
7. Presionamos “Subir” y ya tendríamos nuestra fuente subida, lista para poder utilizarla.

Configurarlas de manera global

Una vez que ya hemos subido nuestra tipografía, también podemos usarla por defecto para que no tengamos que volver a repetir el proceso:

1. Dentro de Divi en tu panel de control de WordPress, accede a Personalizar Temas
2. En esta sección debemos hacer click a ajustes generales / tipografía
3. Dentro de la sección de tipografía podremos elegir nuestra tipografía para las cabeceras o textos de nuestra web

Error en la tipografía

Puede ser que hayas probado a subir tus fuentes por el constructor y no te haya funcionado. En la gran mayoría de ocasiones esto suele deberse a un tema de seguridad. Sin embargo, aunque sea un poco más complicado, tiene solución:

1. En este caso, tendrías que editar el fichero de configuración wp-config.php de tu WordPress dentro la carpeta public_html en tu hosting. Mi recomendación, antes de editarlo, es que guardes una copia del archivo por si hubiese cualquier tipo de problema al editar el código.
2. Una vez dentro de nuestro wp-config.php tendríamos que añadir la siguiente propiedad al final del todo:

define ("ALLOW_UNFILTERED_UPLOADS", true);

3. Una vez puesta la línea de código, subiremos nuestra fuente con el constructor de Divi.
4. Una vez subida nuestra fuente, es MUY IMPORTANTE que borres la línea de código escrita para evitar cualquier tipo de problema de seguridad. Una vez borrada, vuelve a guardar el archivo para terminar con el proceso.

Y, ¿Qué pasa con las fuentes de Google?

Pues las fuentes de google que vienen integradas con Divi conllevan la sobrecarga de un script para descargar la fuente desde el repositorio de Google. Si quieres optimizar tu web, deberías descartar la opción de usar las fuentes de Google e instalar las tuyas propias.

Para desactivar la carga de las fuentes de Google en Divi ve a Opciones de Divi en Divi > Opciones del tema, y en la pestaña General, desactiva la opción Usar las fuentes de Google.

Así, evitarás que en la cabecera de tu web se incluya el javascript que carga las fuentes de Google y estarás optimizando el rendimiento de tu web.

Conclusiones

Gracias a la sencillez y a las opciones de personalización, Divi es una gran apuesta para poder darle a nuestra web la identidad visual que estamos buscando y añadir nuestras propias tipografías.

A su vez, recuerda que si necesitas ayuda con Divi o tienes cualquier duda, puedes contactar conmigo. Estaré encantado de poder ayudarte en todo lo que tu proyecto necesite.

¿Y tú? ¿Sabías que podías subir fuentes personalizadas con Divi?