Fuentes personalizadas de Divi: ¿Cómo funcionan?

Publicado el 09/09/2020 | 33 comentarios

Una fuente personalizada de Divi es una fuente que no está disponible de forma nativa dentro del editor de Divi o incluso del editor de WordPress (Gutenberg). Sin embargo, dependiendo de su proyecto o del proyecto de su cliente, es probable que tenga que utilizar fuentes específicas que se hayan hecho a medida para el proyecto o que se hayan comprado en una plataforma dedicada. Esto está muy lejos de las eternas Google Fonts que están por todas partes.

En este artículo, voy a explicar cómo implementar una fuente personalizada en sus proyectos Divi. Verás que hay varias formas, algunas sencillas y otras más complejas.

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Por qué utilizar una fuente personalizada en Divi?

No todos los proyectos web tienen el mismo aspecto, o al menos no deberían tenerlo... Por eso, utilizar una fuente personalizada -también llamada Fuentes personalizadas - es un buen punto de partida para diferenciar su sitio de los sitios "comunes".

Un tipo de letra personalizado le permite adaptarse perfectamente a su carta gráfica. Por ejemplo, el tipo de letra utilizado para su logotipo podría utilizarse en su sitio web. Así, se crea una homogeneidad entre sus distintos soportes de comunicación.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

2 - Formatos de fuentes para la web

Los archivos de fuentes están disponibles en varios formatos soportados más o menos bien por los navegadores (Chrome, Firefox, Opera, Safari...).

TTF (TrueType Font) y OTF (OpenType Font) son los formatos de fuente más compatibles:

Versión del navegadorEOTOTF/TTFWOFFWOFF2SVG
IE 8x
IE 9 a 11xxx
EDGE 12 a 14xx
FIREFOX 40 a 45xxx
CROMO 43 a 49xxx
SAFARI 8 a 9xxx
OPERA 32 a 35xxx
iOS SAFARI 8.4 a 9.1xxx
ANDROID 4.4 a 44xx
CHROME para Android 46xxx
Compatibilidad de los formatos de las fuentes entre los navegadores (fuente).

Por lo tanto, según esta tabla, se entiende que dependiendo de los archivos de fuentes que importe en su sitio, algunos navegadores no podrán interpretarlos.

Por ejemplo, si importa fuentes en formato EOT o SVG, muy pocos usuarios las verán.

La solución sería importar todos los formatos de fuentes a su sitio para que todos sus usuarios puedan beneficiarse de ellos.

Si no tienes todos estos formatos, tendrás que generarlos a través de FontSquirrel (lo veremos más adelante). Pero en concreto, si utilizas fuentes TTF u OTF, debería ser suficiente(¿quién utiliza todavía Internet Explorer? ¡En serio! Nolo he tocado desde 1998).

La otra solución, que es más bien una copia de seguridad, es especificar en su código las fuentes básicas que debe soportar el navegador en caso de que no pueda mostrar su fuente personalizada. Por ejemplo, puede especificar Arial, Times New Roman, Verdana, Cursiva, etc.

No esperes más. Descubra el tema Divi aquí !

3 - Fuente personalizada frente a Google Font

Aquí hay una pregunta que podrías hacerte: ¿por qué molestarse en usar una fuente personalizada cuando la mayoría de los temas de WordPress, incluyendo Divi, te permiten usar el catálogo de Google Fonts?

Es cierto que la oferta es amplia y es raro no encontrar algo que se adapte a sus necesidades con la multitud de fuentes disponibles. Sin embargo, la mayoría de ellos se ven y se vuelven a ver. Eso es cierto... Pero también hay otro punto a tratar: la confidencialidad.

En efecto, mediante este servicio, la API de Google Fonts proporciona las fuentes solicitadas al visitar una página web desde los servidores de Google. Se almacena en la memoria caché del navegador del visitante y se actualiza cuando es necesario. Como resultado, Google recupera la dirección IP de su visitante, que no es más que un dato personal. En este caso, hay que respetar el GDPR y obtener el consentimiento del visitante para mostrar sus fuentes.

El uso de Google Font no es ilegal, pero su página de política de privacidad deberá informar a su visitante de ello, tal y como exige el GDPR. También tendrá que enlazar con la política de privacidad de Google. Para saber más sobre esto, recomiendo lea este artículo detallado.

Por ello, Divi también ofrece la posibilidad de desactivar Google Fonts para su proyecto:

Desactiver Google Fonts Divi
Desactivar Google Fonts en Divi

Para desactivar Google Fonts en Divi, simplemente vaya a la pestaña Divi > Opciones del tema > General y desmarque la opción de usar Google Fonts.

Si decide prescindir de este servicio, seguramente necesitará el resto de este artículo...

4 - ¿Dónde encontrar fuentes personalizadas?

Hay muchos sitios para encontrar fuentes personalizadas, pero no olvides respetar los derechos de autor. De hecho, las fuentes libres no están necesariamente libres de derechos, esto es lo primero que hay que recordar.

Entonces, debe saber que hay fuentes premium, es decir, fuentes por las que hay que pagar. En este caso, consulte la licencia de estas fuentes porque algunas pueden utilizarse en sus proyectos comerciales y otras sólo en sus proyectos personales. Por lo tanto, asegúrese de obtener la información correcta.

Por último, he aquí una lista de sitios en los que puede encontrar hermosas fuentes:

En la web, es bastante habitual utilizar un tipo de letra clásico para el cuerpo del texto y un tipo de letra algo más sofisticado para los titulares. Sitios como Tipografía o FontJoy se utilizan para encontrar el equilibrio adecuado entre ambos.

plus de ressources pour Divi

5 - Fuente personalizada a través del Constructor Divi

Esta es la opción más fácil. Una vez que hayas encontrado tu(s) fuente(s) ideal(es) y tengas sus archivos, estos son los pasos para instalarlas en Divi:

5.1 - Estar en posesión de al menos los archivos .ttf y .otf

Dependiendo de las plataformas en las que haya encontrado sus fuentes, es posible que disponga de una fuente en formato .ttf o .otf. Para estar seguro, deberías tener ambos, al menos estás seguro...

Por lo tanto, si sólo tiene uno de los dos, puede utilizar un :

Convertir une police TTF en OTF
Convertir OTF a TTF con Convertio.co
  1. Ir al convertidor Convertio.co y cargue su archivo TTF u OTF. En mi ejemplo, es AlexBrush-Regular.ttf.
  2. Elija el formato en el que se debe convertir este archivo. En mi caso, elijo OTF porque ya tengo el archivo TTF.
  3. Confirme haciendo clic en Convertir.
  4. Sube tu archivo, lo necesitarás...

Ahora tienes los archivos OTF y TTF.

5.2 - Importar fuentes personalizadas a través del Constructor Divi

El resto del proceso es sencillo:

Insérer des Polices Personnalisées Divi
Importar fuentes en el Divi Builder
  1. Abra una publicación (página o artículo) con el Constructor Divi e inserte un Módulo de texto. Vaya a la pestaña Estilo para establecer el tipo de letra haciendo clic en el menú desplegable.
  2. En el menú desplegable, elija "Ir en línea".
  3. Elija los archivos para la fuente personalizada. Recuerde también que debe nombrar su fuente. Para mi ejemplo, lo he llamado Alexa.
  4. Importe al menos los archivos OTF y TTF.
  5. Validar haciendo clic en poner en línea.

Ahora su fuente personalizada debería funcionar...

5.3 - Establecer una fuente personalizada por defecto

Ahora que tienes tu fuente personalizada, puedes convertirla en la fuente "por defecto" para todo tu sitio.

De esta forma, no tendrás que configurar tu nueva fuente cada vez que utilices el Constructor Divi, ahorrando mucho tiempo.

Police Par Defaut
Definir las fuentes para todo el sitio.

Sólo tienes que ir a Apariencia > Personalizar > Configuración general > Pestaña de tipografía y seleccionar tu nueva fuente. Puede establecer su fuente para todos los títulos de su sitio (fuente de la cabecera), así como su fuente para el cuerpo del sitio.

5.4 - Problema al importar su fuente en Divi

Probleme Import Police Divi
Problema al importar una fuente personalizada en el Divi Builder

A veces es posible que no pueda importar su fuente personalizada en el Constructor Divi, que dice:

"Lo sentimos, este tipo de archivo no está permitido por razones de seguridad".

Hay dos maneras de corregir el problema:

5.4.1 - Solución 1: corregir mediante wp-config.php

Si te sientes cómodo con WordPress, tu servidor y tu software FTP, todo lo que tienes que hacer es editar el archivo wp-config.php en la raíz de tu sitio y escribir la siguiente línea de código al final del archivo:

define('ALLOW_UNFILTERED_UPLOADS', true);
Wp Config Fichier
Editar el wp-config.php para permitir la importación de fuentes personalizadas en Divi

Tenga en cuenta que, por razones de seguridad, debe eliminar esta línea de código tan pronto como haya terminado de importar sus fuentes personalizadas en Divi!

5.4.2 - Solución #2: corregir con una extensión

Si no se siente del todo cómodo con el manejo de archivos dentro de su servidor, entonces debería utilizar un servidor dedicado :

Autoriser Ttf Otf WordPress
Permitir archivos OTF y TTF en WordPress
  1. Vaya a la pestaña Extensiones > Añadir y busque la extensión Tipos Mime Plus. Instálalo y actívalo.
  2. Vaya a la pestaña Tipos Mime Plus > Editar Tipo Mime.
  3. Para permitir los archivos OTF: nota otf en el campo de la extensión, fuente/otf en el campo Tipo Mime y seleccione Documento como tipo de archivo.
  4. Para permitir que los archivos TTF archivos: nota ttf en el campo de la extensión, fuente/ttf en el campo Tipo Mime y seleccione Documento como tipo de archivo.

Ya está, puedes volver a iniciar la importación (paso 5.2 de este artículo) y ya no deberías encontrar el problema.

6 - Fuente personalizada en un tema hijo (método @font-face)

Hay otra manera de implementar una nueva fuente en su sitio de WordPress, es el método @font-face. Este funciona para cualquier tema, no sólo para Divi.

Simplemente tienes que añadir tus archivos de fuentes personalizadas dentro de tu tema hijo y añadir unas pocas líneas de código a su archivo style.css.

Font Squirrel Converter
Convertir fuentes con FontSquirrel
  1. Ir a la sitio web oficial de FontSquirrel y suba el archivo de fuentes personalizadas que tenga (OTF o TTF, por ejemplo).
  2. Seleccione el modo EXPERTO.
  3. Comprueba todos los formatos de archivo.
  4. Deja las demás opciones como están y acepta las condiciones. Haga clic en DESCARGUE SU KIT.
  5. Ahora tiene una carpeta que contiene varios archivos. Seleccione los 5 formatos de fuente (EOT, SVG, TTF, WOFF y WOFF2) y colóquelos en la raíz de su Tema infantil Divi.
Css Divi Police
Hoja de estilo CSS para fuentes personalizadas
  1. A continuación, abra el archivo style.css de su tema hijo y coloque el código contenido en el archivo stylesheet.css proporcionado por FontSquirrel. Este código tiene el siguiente aspecto:
@font-face {
    font-family: 'goldie_rainbowregular';
    src: url('goldie_rainbow-webfont.eot');
    src: url('goldie_rainbow-webfont.eot?#iefix') format('embedded-opentype'),
         url('goldie_rainbow-webfont.woff2') format('woff2'),
         url('goldie_rainbow-webfont.woff') format('woff'),
         url('goldie_rainbow-webfont.ttf') format('truetype'),
         url('goldie_rainbow-webfont.svg#goldie_rainbowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
  1. A continuación, defina qué etiquetas HTML deben utilizar esta fuente personalizada. El código CSS podría ser así:
h1 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 48px;
}

h2 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 36px;
}

h3 {
font-family: goldie_rainbowregular, Arial, sans-serif;
font-size: 24px;
}

Como puede ver en el código anterior, la fuente "goldie_rainbowregular" se utiliza para los títulos de los niveles 1, 2 y 3. El segundo valor (Arial) y el tercer valor (sans-serif) son fuentes de reserva que serán tenidas en cuenta por los navegadores en caso de que no puedan cargar su fuente personalizada.

Me imagino que este método es mucho más complejo que el anterior pero es la forma clásica y universal de añadir una fuente personalizada en un tema de WordPress.

7 - Fuente personalizada a través de la configuración de Divi

Hay una última solución para añadir fuentes personalizadas en Divi. Esto es si tu fuente está alojada en otro lugar de la web o si necesitas una fuente de Google que aún no está disponible en el Constructor de Divi (esto puede suceder).

Así es como se hace:

Custom Font Divi
Añadir una fuente personalizada a través del tema Divi
  1. Visite el Fuentes de Google. Busque su fuente y selecciónela haciendo clic en Seleccione este estilo.
  2. Se abre un panel lateral.
  3. En el Incrustarencontrarás el código para implementar en Divi. Copia el primero.
  4. Retournez dans l’administration de votre site à l’onglet <strong>Divi > Options du thème > Intégration</strong> et collez ce code dans le premier champ, la section <strong><head></strong> du site. Le code devrait ressembler à cela :
 
  1. A continuación, tendrá que definir en su hoja de estilo CSS qué elementos deben utilizar esta nueva fuente. Por ejemplo, si quiero que mis títulos H4 utilicen la fuente Lobster, este es el código que debo añadir a la pestaña Apariencia > Personalizar > CSS adicional:
h4 {
font-family: 'Lobster', cursive;
font-size: 24px;
}
  1. Ahora, independientemente del editor que utilices (Gutenberg o Divi), todas las fuentes definidas en la hoja de estilos deben ser funcionales en todo el sitio.

8 - En conclusión...

Las fuentes, los colores y las imágenes son los elementos más importantes en un diseño gráfico y en el diseño de un sitio web. Como todo el tiempo con WordPress, hay varias maneras de hacerlo bien. Espero que este tutorial te haya ayudado a entender mejor cómo WordPress y Divi y le habrá ayudado a avanzar en sus proyectos de obra.

Para ir más allá, he aquí una lista de lecturas que debería interesarle:

Polices Perso Divi
Ajouter Polices personnalisées Divi
Add custom font in Divi

2.320 palabras

9

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

33 Commentaires

  1. Anne-Laure

    Bonjour ! Merci pour ce post très constructif !
    J’ai suivi à la lettre la méthode Mime Type Plus et l’ajout de police dans le divi builder !
    A priori ça fonctionne très bien sur l’ensemble de mes sites, sauf sur un !
    Je ne comprend pas, lorsque je visionne une page la police personnalisé s’affiche très bien, et si je recharge la page la police saute ! Auriez-vous un conseil ? Merci beaucoup !

  2. Lycia Diaz

    Salut Anne Laure. Ça saute puis ça revient ? Ça peut venir du cache peut-être. As-tu un plugin de cache ?

  3. Anne-Laure

    Oui c’est ça ! Merci pour ta réponse rapide !
    Ca saute et ça revient ! J’avais de prè-installé « WP Fastest Cache » et « WP-Optimize – Clean, Compress, Cache » que j’ai désactivé pour voir si ça venait de là… Mais pas de changement visible !

  4. Anne-Laure

    C’est exactement ça ! Merci de ta réponse rapide
    La police saute et revient !
    J’avais deux extensions pré-installé : WP Fastest Cache et WP-Optimize – Clean, Compress, Cache
    ! Je les ai désactivé mais rien ne change !

  5. Lycia Diaz

    Alors si rien ne change, il faut investiguer : essaye avec une autre police pour voir si ça vient de là ou alors il peut y avoir un conflit ailleurs ?

  6. Anne-Laure

    J’ai changé la police mais le problème persiste ! Juste à ce niveau d’ailleurs… Sur d’autres polices personnalisées ça ne saute pas !

  7. Lycia Diaz

    Désolée je sèche… ça vient peut-être des autres plugins…

  8. Emilie

    Bonjour Lycia,
    Sur la version wordpress 5.6.2, je ne trouve pas cette ligne de code dans le wp-config ?
    Merci pour cet article.
    Emilie

  9. granon

    Bonjour Lycia,
    Je viens de finir une refonte de site dans un sous-domaine et j’avais installé une police personnalisée dans Divi : le Faune (http://www.cnap.graphismeenfrance.fr/faune/). Tout fonctionnait bien mais lorsque j’ai déposé les fichiers à la racine du domaine, les polices ont sauté et je n’arrive pas à les rétablir. J’ai vérifié via le FTP : elles sont bien présentes dans le dossier fontes (.ttf et .otf). As-tu une idée ?
    Merci d’avance pour tes lumières.
    Sandrine
    PS. Le site en question est ‘atelierdelta.eu’. Sur la page d’accueil, on peut voir un exemple d’italique dans le bloc du haut. Les fonds aussi ont disparus mais je les ai rétablis sur la page d’accueil et sur le page espace Public…

  10. Emilie

    Désolée, j’avais mal lu, il faut lui ajouter cette ligne de code,
    vous pouvez supprimer mon commentaire si vous voulez.
    Merci encore pour votre site.

  11. Lycia Diaz

    OK Super !

  12. Lycia Diaz

    Salut Granon, c’est bizarre. Il y avait peut-être un problème de mise en cache ? C’est rentré dans l’ordre depuis ?

  13. Granon Sandrine

    J’ai installé les polices à nouveau et tout est rentré dans l’ordre. Merci.

  14. Lycia Diaz

    Super !

  15. Elisa Morgand

    Merci pour le tutoriel ! Il fonctionne à merveille !

  16. Lycia Diaz

    Super !

  17. François LIEURY

    Bonjour,
    Je voulais essayé de suivre votre tuto pour personnaliser ma typographie : mais dans le 5.3 – Définir une police personnalisée par défaut moi je tombe sur un side-barre « vide » j’ai juste un onglet widget qui est vide…
    Est-ce que j’ai fait une erreur qui empêche les paramètres généraux de s’afficher?
    En vous remerciant pour ce que vous faites et du temps que vous allez m’accorder,
    Cordialement
    François

  18. Hank

    Great article, super helpful!

  19. Lycia Diaz

    Thank you Hank !

  20. Lycia Diaz

    Bonjour François, il faut bien aller à l’onglet Apparence > Personnaliser > Paramètres généraux > Typographie. Il n’y a pas de Widget ici.

  21. Emilie

    Bonjour,

    Ma police n’apparait pas sur le mobile mais je la bien sur les autres écrans.
    Savez-vous d’où ça pourrait venir ?
    J’ai mis la police avec la méthode font-face

    Merci d’avance

  22. Lycia Diaz

    Bonjour Emilie, c’est bizarre. Peut-être as-tu un plugin de cache qui empêche cela ?

  23. Emilie

    Bonjour Lycia,

    Merci pour votre réponse.
    En effet cela venait du plugin 🙂

  24. Isabelle

    Bonjour. Merci encore une fois pour ce super article. Vous êtes devenue ma référence. Bravo pour votre boulot.
    J’ai une question. J’ai déjà installé une police en otf. Vous recommandez d’installer au moins deux formats. Comment rajouter le format ttf si possible sans avoir à rentrer dans le code? Sinon il me faudrait desinstaller ma police et la réinstaller avec les deux formats. Est-ce vraiment nécessaire si la version otf semble bien fonctionner sur différents navigateurs?

    Merci pour votre réponse.

  25. isabelle

    Bonjour,

    Je ne sais pas si mon précédent commentaire a bien été enregistré.
    J’ai déjà téléchargé ma police en otf et elle s’affiche bien sur les navigateurs mentionnées dans le tableau plus haut. Est-il malgré tout indispensable que je charge la version ttf sur le site? Si oui, comment faire pour la rajouter sans avoir à supprimer celle déjà installé? Ai-je une solution qui m’éviterait de rentrer dans le code du site svp? J’avoue que tout fonctionne et que j’aimerais éviter des manipulations que je ne maitriserai pas mais votre article m’interpelle.

    Merci pour votre réponse.

  26. Lycia Diaz

    Pardon Isabelle, je t’ai répondu par email. Non, c’est bon, le fichier OTF est suffisant normalement. Si tout fonctionne, pas besoin du TTF

  27. Lycia Diaz

    Non, si tout fonctionne, pas besoin du second fichier.

  28. Anthony F

    Thank you so much for your help! Before reading your guide, I couldn’t even upload files downloaded directly from Google Fonts – I was going to rip my hair out!!!

    I followed ‘5.4.2 – Solution #2: correct with an extension’ – the Mime Types Plus plugin is so easy to use.

    Thank you so much again!

  29. Emma

    Un tout grand merci pour ton article. J’avais justement le problème avec le message d’erreur et grâce à toi, j’ai eu l’occasion de télécharger le plugin nécessaire pour lever se problème.
    Merci 🙂

  30. Lycia Diaz

    Super

  31. Mathilde

    Bonjour Lycia,

    J’espère que tu vas bien.

    Doit-on obligatoirement désactiver Google Font pour télécharger de nouvelles polices ? Car lorsque je tente d’en télécharger, je reçois ce message d’erreur : « Désolé, ce type de fichier n’est pas autorisé pour des raisons de sécurité. »

    Merci pour ton aide !

  32. Lycia Diaz

    Salut Mathilde, non il ne faut pas les désactiver. Mais à voir ton commentaire je comprends que tu n’as pas lu mon tutoriel en entier 😉

  33. Lycia Diaz

    Great ! Thank you 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto