UnoFuente personalizada Divies una fuente que no está disponible nativamente dentro del editor Divi o incluso la de WordPress (Gutenberg). Sin embargo, dependiendo de su proyecto o del proyecto de su cliente, es probable que tenga que usarfuentes específicasque han sido hechos a medida para el proyecto o han sido comprados en una plataforma dedicada. Así que estamos lejos de lo eternoGoogle FontsQue encontramos en todas partes.
En este artículo, explicarécómo implementar una fuente personalizada en sus proyectos Divi. Verás que hay varias maneras, algunas simples y otras más complejas.
- 1 - ¿Por qué utilizar una fuente personalizada en Divi?
- 2 - Formatos de fuente para la Web
- 3 - Fuente personalizada vs Google Font
- 4 - ¿Dónde encontrar fuentes personalizadas?
- 5 - Fuente personalizada a través del Divi Builder
- 6 - Fuente personalizada en un tema infantil (metod @font-face)
- 7 - Fuente personalizada a través de la configuración Divi
- 8 - En conclusión...
1 - ¿Por qué utilizar una fuente personalizada en Divi?
No todos los proyectos web parecen iguales, o al menos no deberían mirar el mismo... Por eso utiliza una fuente personalizada - también llamadaFuente personalizada- es un buen punto de partida para diferenciar su sitio de sitios "común".
Una fuente personalizada le permite ajustarse perfectamente a su gráfico. Por ejemplo, la fuente utilizada para su logotipo podría utilizarse en su sitio web. Así, la homogeneidad se crea entre sus diversos medios de comunicación.
¿Sabes que puedes probar Divi gratis?Nos vemos en esta páginay haga clic en "Pruébalo GRATIS"
2 - Formatos de fuente para la Web
Los archivos de fuente están disponibles en varios formatos soportados más o menos bien por los navegadores (Chrome, Firefox, Opera, Safari...).
TTF(TrueType Font) yOTF(OpenType Font) son los mejores formatos de fuente compatibles:
| Versión del navegador | EOT | OTF/TTF | WOFF | WOFF2 | SVG |
|---|---|---|---|---|---|
| IE 8 | x | ||||
| IE 9-11 | x | x | x | ||
| EDGE 12-14 | x | x | |||
| FIREFOX 40 a 45 | x | x | x | ||
| CHROME 43-49 | x | x | x | ||
| SAFARI 8-9 | x | x | x | ||
| OPERA 32-35 | x | x | x | ||
| iOS SAFARI 8.4 a 9.1 | x | x | x | ||
| ANDROID 4.4-44 | x | x | |||
| CHROME para Android 46 | x | x | x |
Así que basado en esta tabla, usted entiende que dependiendo de los archivos de fuente que va a importar en su sitio, algunos navegadores no podrán interpretarlos.
Por ejemplo, si importa fuentes en formato EOT o SVG, muy pocos usuarios los verán.
La solución sería entonces importar todos los formatos de fuentes en su sitio para que todos sus usuarios puedan beneficiarse.
Si no estás en posesión de todos estos formatos, necesitarás generarlos a través deFontSquirrel(lo veremos más tarde). Pero concretamente, si utiliza fuentes TTF o OTF, esto debería ser suficiente (en gran parte)¿Quién todavía usa Internet Explorer? ¡En serio! Por mi parte, no he tocado eso desde 1998).
La otra solución, que es más bien una solución de respaldo, es indicar en su código las fuentes básicas que deben ser soportadas por el navegador en caso de que no muestre su fuente personalizada. Por ejemplo, puede indicar Arial, Times New Roman, Verdana, Cursive, etc.
¡No te demores!Descubre el tema Divi aquí. !
3 - Fuente personalizada vs Google Font
Aquí hay una pregunta que se puede preguntar: ¿por qué molestarse usando uncostumbreya que la mayoría de los temas de WordPress, incluyendo Divi, permiten utilizar el catálogo deGoogle fonts(Google Fonts)
Es cierto que la elección es muy amplia y es raro no encontrar zapatos a su pie con la multitud de fuentes disponibles. Sin embargo, la mayoría de ellos son vistos y revisados. Así es... Pero también hay otro punto a tratar:confidencialidad.
De hecho, usando este servicio,Google Fonts APIproporcionó las fuentes solicitadas al visitar una página web de los servidores de Google. Todo se almacena en el caché del navegador de su visitante y se actualiza si es necesario. Como resultado, Google recupera la dirección IP de su visitante que no es más que datos personales. En este caso, el GDPR debe ser respetado y usted debe obtener el consentimiento del visitante para ver sus políticas.
Usando Google La fuente no es ilegal pero su página de privacidad tendrá que informar a su visitante, como lo exige el GDPR. También tendrá que vincularse con la política de privacidad de Google. Para saber más sobre esto, le aconsejo queleer este artículo en detalle.
Es también por estas razones queDivi propone desactivación de fuentes Google Fontspara su proyecto:
Para desactivar las fuentes de Google de Divi, sólo ve a la pestañaDivi Opciones temáticas Generaly desmarque la opción de utilizar Google Fonts.
Si decide dispensar con este servicio, sin duda necesitará la continuación de este artículo...
4 - ¿Dónde encontrar fuentes personalizadas?
Hay muchos sitios para encontrar fuentes personalizadas pero no se olvide de respetar los derechos de autor. En efecto,Fuentes gratuitasEs lo primero que recuerdo.
En segundo lugar, debemos saber que hayFuentes Premium, es decir.fuentes pagadas. En este caso, consulte la licencia de estas fuentes ya que algunas pueden ser utilizadas en suproyectos comercialesy otros sólo en suproyectos personales. Asegúrate de averiguarlo.
Por último, aquí hay una lista de sitios donde se pueden encontrar hermosas fuentes:
En la Web, es muy común utilizar una fuente clásica para el cuerpo de texto y una fuente ligeramente más sofisticada para sus fuentes de título. Sitios comoTipospiraciónoFontJoyencontrar el equilibrio adecuado entre los dos.
5 - Fuente personalizada a través del Divi Builder
¡Esta es la opción más fácil! Una vez que ha encontrado su fuente(s) ideal y están en posesión de sus archivos, aquí están los pasos para instalarlos en Divi:
5.1. - Tener archivos .tf y .otf al menos
Dependiendo de las plataformas en las que encontró sus fuentes, puede estar en posesión de una fuente en formato.tfo.otfPara seguridad, necesitas ambos, al menos estás callado...
Así que si sólo tiene uno en dos, puede utilizar un convertidor de archivos:
- Nos vemos en el convertidorConvertirio.coy descargar su archivo TTF o OTF. Por mi ejemplo, esto se trataAlexBrush-Regular.ttf.
- Elija el formato en el que este archivo debe ser convertido. En mi caso, elijo OTF porque ya tengo el archivo TTF.
- Validar haciendo clicConvertir.
- Descargue su archivo, lo necesitará...
Aquí está ahora en posesión de archivos OTF y TTF.
5.2. - Importar fuentes personalizadas a través del Divi Builder
El resto del proceso es simple:
- Abrir una publicación (página o artículo) con el Divi Builder e insertar unMódulo de texto. Ve a la pestañaEstilopara configurar la fuente haciendo clic en el menú desplegable.
- Desde el menú desplegable, elija"Online".
- Elija archivos de fuentes personalizados. Piensa en nombrar a tu policía. Por mi ejemplo, lo llaméAlexa.
- A una importación mínima de archivos OTF y TTF.
- Validar haciendo clic en línea.
Aquí, su fuente personalizada debe ser funcional...
5.3. - Establecer una fuente personalizada predeterminada
Ahora que estás en posesión de tu fuente personalizada, puedes hacerloasignar el papel "default"para todo su sitio.
Así que no necesitas definir tu nueva fuente cada vez que uses el Divi Builder, así que ahorrarás mucho tiempo.
Sólo ve a la pestañaAspecto > Personalizar > Ajustes generales > Tipografíay seleccione su nueva fuente. Puede configurar su fuente para todos los títulos de su sitio (policía principal) así como su fuente para el cuerpo del sitio.
5.4 - Problema al importar su fuente en Divi
Usted puede no ser capaz de importar su fuente personalizada en el Divi Builder, que dice:
"Lo siento, este tipo de archivo no está permitido por razones de seguridad".
Dos soluciones están disponibles para corregir el problema:
5.4.1. - Solución #1: correcta mediante wp-config.php
Si usted está cómodo con WordPress, su servidor y su software FTP, sólo editar el archivowp-config.phppresente en la raíz de su sitio e introduzca la siguiente línea de código al final del archivo:
define('ALLOW_UNFILTERED_UPLOADS', true);
Atención, por razones de seguridad, precisamente, tendrá que 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 : correcta con una extensión
Si usted no está en absoluto cómodo con el manejo de archivos dentro de su servidor, entonces prefiere el uso de una extensión dedicada:
- Vaya a la pestañaPrórrogas Añadiry buscar la extensiónMime Types Plus. Instala y activalo.
- Vaya a la pestañaTipos de Mime Plus Editar tipo Mime.
- Para permitir archivos OTF: notaotfen el campo de extensión,font/otfen el campo Mime Tipo y elegirDocumentocomo un tipo de archivo.
- Para permitir archivosTTFNota:ten el campo de extensión,font/tffen el campo Mime Tipo y elegirDocumentocomo un tipo de archivo.
Aquí puede comenzar de nuevo la importación (Paso 5.2 de este artículo) y ya no debe encontrar el problema.
6 - Fuente personalizada en un tema infantil (metod @font-face)
Existe otra solución paraimplementar una nueva fuente en tu Palabra Sitio de prensa, este es el@font-face methodEste trabaja para cualquier tema, no sólo Divi.
Sólo tiene que añadir archivos de sus fuentes personalizadas dentro de su tema infantil y añadir algunas líneas de código a su archivoestilo.css.
- Nos vemos ensitio web oficial de FontSquirrely descargar el archivo de fuente personalizado que tiene en su posesión (por ejemplo, OTF o TTF).
- Seleccione el modoEXPERTO.
- Revise todos los formatos de archivo.
- Deje las otras opciones en su posición y acepte los términos. Haga clicDeja tu mano.
- Ahora está en posesión de una carpeta que contiene varios archivos. Seleccione los 5 formatos de fuentes (EOT, SVG, TTF, WOFF y WOFF2) y coloquelos en la raíz de suDivi child theme.
- Entonces abre el archivoestilo.cssde su niño tema y colocar el código en el archivoestilossheet.cssproporcionado por FontSquirrel. Este código se ve así:
@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, especificar qué etiquetas HTML deben utilizar esta fuente personalizada. El código CSS podría parecer 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 usted ve en el código anterior, la policía"goldie rainbowregular"se utiliza para los títulos de Nivel 1, 2 y 3. El segundo valor (Arial) y el tercer valor (sin salida) sonPolicía de emergenciaque serán tenidos en cuenta por los navegadores en caso de que no carguen su fuente personalizada.
Puedo concebir que este método es mucho más complejo que el anterior, pero es la manera 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 Divi
Hay una solución final paraañadir fuentes personalizadas en Divi. Esto es válido si tufont is hosted elsewhere on the Webo si necesitasfuente Google Font que todavía no está disponible en el Divi Builder(Esto puede suceder).
Así es como:
- Visite el sitio webGoogle Fonts. Encontrar su fuente y seleccionarlo haciendo clic en+Seleccione este estilo.
- Se abre un panel lateral.
- En la pestañaEmbed, usted encontrará el código para implementar en Divi. Copia el primero.
- Volver a la administración de su sitio en la pestañaDivi Opciones temáticas Integracióny pega este código en el primer campo, sección
<head>el sitio. El código debe verse así:
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
- Entonces, tendrá que definir en su hoja de estilo CSS que elementos deben utilizar esta nueva fuente. Por ejemplo, si quiero que mis títulos de H4 utilicen a la policíaLangosta, aquí está el código para añadir a la pestañaAspecto √≥ Personalizar √≥ CSS adicional :
h4 {
font-family: 'Lobster', cursive;
font-size: 24px;
}- Ahora, independientemente del editor utilizado (Gutenberg o Divi), todas las fuentes definidas en la hoja de estilo deben ser funcionales en todo el sitio.
8 - En conclusión...
Fuentes, colores e imágenes son los elementos más importantes en un diseño gráfico y web. Como todo el tiempo con WordPress, hay varias maneras de lograr sus fines. Espero que este tutorial le haya ayudado a comprender mejor el funcionamiento deWordPress y Diviy le han ayudado a avanzar sus proyectos del sitio.
Para ir más lejos, aquí hay una lista de reproducción que debe interesarle:
- Cómo descargar fuentes en WordPress sin plugin.
- 50 términos de tipografía utilizados en reddesign.
- 3 herramientas para encontrar una fuente de una imagen.
- 40 mejores fuentes gratis.
- Cómo importar fuentes TipoKit en WordPress.
- Cómo crear tu 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.
Encore un super article, super utile et super clair.
Merci Lycia!
Merci Jérôme