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 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.
- 1 - ¿Por qué utilizar una fuente personalizada en Divi?
- 2 - Formatos de fuentes para la web
- 3 - Fuente personalizada frente a Google Font
- 4 - ¿Dónde encontrar fuentes personalizadas?
- 5 - Fuente personalizada a través del Constructor Divi
- 6 - Fuente personalizada en un tema hijo (método @font-face)
- 7 - Fuente personalizada a través de la configuración de Divi
- 8 - En conclusión...
Aviso: 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 encajar perfectamente con su identidad corporativa. Por ejemplo, el tipo de letra utilizado para su logotipo podría utilizarse en su sitio web. De este modo, se crea una homogeneidad entre sus distintos soportes de comunicación.
¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA
2 - Formatos de fuentes para la web
Los archivos de fuentes están disponibles en varios formatos que son 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 navegador | EOT | OTF/TTF | WOFF | WOFF2 | SVG |
|---|---|---|---|---|---|
| IE 8 | x | ||||
| IE 9 a 11 | x | x | x | ||
| EDGE 12 a 14 | x | x | |||
| FIREFOX 40 a 45 | x | x | x | ||
| CROMO 43 a 49 | x | x | x | ||
| SAFARI 8 a 9 | x | x | x | ||
| OPERA 32 a 35 | x | x | x | ||
| iOS SAFARI 8.4 a 9.1 | x | x | x | ||
| ANDROID 4.4 a 44 | x | x | |||
| CHROME para Android 46 | x | x | x |
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.
Si no tiene todos estos formatos, sólo tendrá que generarlos a través de FontSquirrel (lo veremos más adelante). Pero en la práctica, si se utilizan fuentes TTF u OTF, esto debería ser más que suficiente(¿quién utiliza ya Internet Explorer? ¡En serio! Nolo he tocado desde 1998).
La otra solución, que es más bien una alternativa, 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 se demore. Descubra el tema Divi aquí !
3 - Fuente personalizada frente a Google Font
Aquí hay una pregunta que te puedes hacer: ¿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 han sido vistos y vueltos a ver. Pero hay otro punto que hay que destacar: 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 debe informar a su visitante de ello, tal y como exige el GDPR. También debería enlazar con la política de privacidad de Google. Para saber más sobre esto, recomiendo lea este artículo detallado.
Es también por estas razones que Divi ofrece desactivar Google Fonts para su proyecto:
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 recuerda respetar los derechos de autor. Efectivamente, las fuentes libres no están necesariamente libres de derechos, eso es lo primero que hay que recordar.
En segundo lugar, debe saber que hay fuentes premium, es decir, fuentes que hay que pagar. En este caso, asegúrese de consultar 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 Typespiration o FontJoy s ayuda a encontrar el equilibrio adecuado entre ambos.
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, aquí tienes 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, puede estar en posesión de una fuente en formato .ttf o .otf. Para estar seguro, deberías tener ambos, al menos estarás a salvo...
Por lo tanto, si sólo tiene uno de los dos, puede utilizar un :
- Ir al convertidor Convertio.co y suba su archivo TTF u OTF. En mi ejemplo, es AlexBrush-Regular.ttf.
- Elija el formato al que debe convertirse este archivo. En mi caso, elijo OTF porque ya tengo el archivo TTF.
- Confirme haciendo clic en Convertir.
- Sube tu archivo, lo necesitarás...
Ahora tiene los archivos OTF y TTF.
5.2 - Importar fuentes personalizadas a través del Constructor Divi
El resto del proceso es sencillo:
- 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.
- En el menú desplegable, elija "Ir en línea".
- Elija los archivos para la fuente personalizada. Recuerde también que debe nombrar su fuente. Para mi ejemplo, la he llamado Alexa.
- Importe al menos los archivos OTF y TTF.
- Validar haciendo clic en cargar.
Su fuente personalizada debería ser ahora funcional...
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 manera, no tendrás que definir tu nueva fuente cada vez que utilices el Constructor Divi, ahorrando mucho tiempo.
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 encabezados 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
Puede ocurrir que no puedas importar tu fuente personalizada en el Constructor de Divi, lo que muestra :
"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);
¡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 :
- Vaya a la pestaña Extensiones > Añadir y busque la extensión Tipos Mime Plus. Instálalo y actívalo.
- Vaya a la pestaña Tipos Mime Plus > Editar Tipo Mime.
- 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.
- 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.
Ahora puede volver a iniciar la importación (paso 5.2 de este artículo) y ya no debería encontrar el problema.
6 - Fuente personalizada en un tema hijo (método @font-face)
Hay otra forma de implementar una nueva fuente en su sitio de WordPress, y es el método @font-face. Esto 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.
- Ir a la sitio web oficial de FontSquirrel y suba el archivo de la fuente personalizada que tiene (por ejemplo, OTF o TTF).
- Seleccione el modo EXPERTO.
- Comprueba todos los formatos de archivo.
- Deja las demás opciones como están y acepta las condiciones. Haga clic en DESCARGUE SU KIT.
- 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.
- A continuación, abra el archivo style.css de su tema hijo y coloque en él 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;
}- 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.
Veo 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 a 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 a 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:
- Visite el Fuentes de Google. Busque su fuente y selecciónela haciendo clic en +Seleccione este estilo.
- Se abre un panel lateral.
- En el Incrustarencontrarás el código para implementar en Divi. Copia el primero.
- 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 :
- 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;
}- Ahora, independientemente del editor que se utilice (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 el diseño de un sitio web. Como en todas las cosas de WordPress, hay varias formas de conseguirlo. 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:
- Cómo subir fuentes a WordPress sin un plugin.
- 50 términos tipográficos utilizados en el diseño web.
- 3 herramientas para encontrar una fuente a partir de una imagen.
- Los 40 mejores tipos de letra gratuitos.
- Cómo importar fuentes de TypeKit a WordPress.
- Cómo crear su propia fuente personalizada.
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 !
Salut Anne Laure. Ça saute puis ça revient ? Ça peut venir du cache peut-être. As-tu un plugin de cache ?
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 !
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 !
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 ?
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 !
Désolée je sèche… ça vient peut-être des autres plugins…
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
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…
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.
OK Super !
Salut Granon, c’est bizarre. Il y avait peut-être un problème de mise en cache ? C’est rentré dans l’ordre depuis ?
J’ai installé les polices à nouveau et tout est rentré dans l’ordre. Merci.
Super !
Merci pour le tutoriel ! Il fonctionne à merveille !
Super !
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
Great article, super helpful!
Thank you Hank !
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.
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
Bonjour Emilie, c’est bizarre. Peut-être as-tu un plugin de cache qui empêche cela ?
Bonjour Lycia,
Merci pour votre réponse.
En effet cela venait du plugin 🙂
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.
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.
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
Non, si tout fonctionne, pas besoin du second fichier.
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!
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 🙂
Super
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 !
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 😉
Great ! Thank you 😉
Bonjour Lycia,
j’ai une question à laquelle je n’arrive pas à trouver la solution :
Je dois utiliser une font d’Adobe (j’ai le compte CC), sur un site DIVI, mais je ne sais pas commet faire…
As-tu une idée ?
Merci d’avance,
Valérie
Bonjour Lycia 🙂
Merci beaucoup pour ces explications très détaillées ! J’ai essayé d’intégrer les polices avec la méthode Font face sur le FTP et en plus de mettre H1, H2 etc.. j’ai aussi ajouté « a, li, nav… » car je souhaitais que la police soit aussi mon corps de texte. Or finalement c’est toute l’interface de Divi qui devient cette typographie. Lorsque je suis dans le visual builder et que je clique sur l’engrenage pour modifier quelque chose toute la fenêtre Divi qui s’affiche est écrite dans cette même typographie. Y a t-il un moyen de faire en sorte que la police qu’on importe s’affiche pour tous les titres, corps de textes, listes à puce etc.. sauf pour l’interface Divi ?
Merci beaucoup !
Hello Aurore, non, en effet, tout prend la police que tu as codé. Si elle te dérange, pense à tes lecteurs, elle pourrait les déranger aussi ? Sinon, si tu penses que c’est acceptable, il faudra faire avec, aussi dans le back office 😉
Salut Valerie, je sais pas ? Est il possible d’obtenir les fichiers de cette police ? Si oui, tu suis simplement le tutoriel ici
Merci de ton retour Lycia,
j’ai eu la réponse de la part d’Adobe, et oui il faut une licence supplémentaire pour utiliser leur fonts en version web (alors que j’ai la licence…). Belle fin d’année à tous !
Ah ok merci pour l’info, c’est pas étonnant de leur part…
Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii !
Décidément, c’est régulièrement grâce à ton blog que je trouve réponse à mes blocages ! trop chouette !
Super !
Oh génial, merci Lycia, j’avais le message d’erreur suite à l’importation des 2 formats, et grâce à Mime Types Plus le problème est résolu !! 🙂
Super Marine !
Merci beaucoup !!
Merci infiniment pour ce tuto !
D’habitude mes imports de police se passent sans encombre mais aujourd’hui ça ne fonctionnait pas. Jusqu’à ce que j’utilise la méthode Mime Types Plus que je ne connaissais pas.
Merci encore 😀
Super !
Bonjour Lycia,
Merci pour cet article qui me sauve la vie ahah !
Petite question : J’ai utilisé la méthode avec Mime Type Plus. Une fois que j’ai réalisé l’opération et que tout fonctionne, est-ce que je peux désinstaller l’extension ?
Merci encore,
I love Divi custom fonts! They make my blog look so professional.
Louis, oui, normalement, tu peux supprimer l’extension.