Fuentes personalizadas Divi: ¿cómo funciona?

Publicado el 09/09/2020 | 14 comentarios

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

En este artículo explicaré cómo implementar una fuente personalizada en sus proyectos Divi. Verán que hay varias maneras, algunas simples y otras más complejas.

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

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

No todos los proyectos web se ven, o al menos deberían verse, igual... Por eso el uso de una fuente personalizada, también conocida como Fuente personalizada - es un buen punto de partida para diferenciar su sitio de los sitios "comunes".

Un tipo de letra personalizado le permite coincidir perfectamente con su carta gráfica. Por ejemplo, la fuente usada para su logo podría ser usada en su sitio web. Así, se crea una homogeneidad entre sus diversos soportes de comunicación.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "TRY IT FOR FREE".

2 - Formatos de fuentes para la Web

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

TTF (TrueType Font) y OTF (OpenType Font) son los formatos de fuentes mejor soportados:

Versiones del navegadorEOTOTF/TTFWOFFWOFF2SVG
IE 8x
IE 9 a 11xxx
BORDE 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
ANDROIDE 4.4 a 44xx
CROMO para el Androide 46xxx
Compatibilidad de formatos de fuentes en los navegadores (fuente).

Así que según esta tabla, usted entiende que dependiendo de los archivos de fuentes que importará 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 entonces importar todos los formatos de fuentes en su sitio para que todos sus usuarios puedan beneficiarse de ellos.

Si no tienes todos estos formatos, puedes generarlos a través de FontSquirrel (lo veremos más adelante). Pero en la práctica, si utiliza fuentes TTF u OTF, esto debería ser más que suficiente (¿quién sigue utilizando Internet Explorer? ¡En serio! En cuanto a mí, no he tocado esto desde 1998).

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

¡No esperes más! Descubre el tema de la Divi aquí !

3 - Fuente personalizada vs. Fuente de Google

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

Es cierto que la elección es bastante amplia y es raro no encontrar el zapato adecuado para ti con la multitud de fuentes disponibles. Sin embargo, la mayoría de ellas se ven y se revisan. Eso es cierto... Pero también hay otro punto a tratar: la confidencialidad.

De hecho, al utilizar este servicio, el API de fuentes de Google proporciona las fuentes solicitadas cuando se visita una página web desde los servidores de Google. Esto se almacena en el caché del navegador de su visitante y se actualiza si es necesario. Como resultado, Google recupera la dirección IP del visitante, que no es más que un dato personal. En este caso, la RGDP debe ser respetada y debe 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 tendrá que informar a su visitante sobre ello, según lo requerido por el DPMR. También tendrás que enlazar con la Política de privacidad de Google. Para saber más sobre esto, le aconsejo que lea este detallado artículo.

Es también por estas razones que Divi ofrece la desactivación de las fuentes de Google para su proyecto:

Desactiver Google Fonts Divi
Deshabilitar las fuentes de Google en Divi

Para desactivar las fuentes de Google de Divi, sólo tienes que ir a la pestaña Divi > Opciones de temas > General y desmarcar la opción de usar las fuentes de Google.

Si decide prescindir de este servicio, sin duda 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 gratuitas no son necesariamente libres de regalías, eso es lo primero que hay que recordar.

A continuación, es importante saber que hay pólizas de prima, es decir, pólizas pagadas. En este caso, por favor, consulte la licencia de estas fuentes porque algunas de ellas pueden ser utilizadas en sus proyectos comerciales y otras sólo en sus proyectos personales. Así que asegúrate de averiguarlo.

Finalmente, aquí hay una lista de sitios donde puedes encontrar hermosas fuentes:

En la Web, es bastante común utilizar una fuente clásica para el cuerpo del texto y una fuente un poco más sofisticada para las fuentes de los títulos. Sitios como Typespiration o FontJoy permiten que se logre el equilibrio adecuado entre los dos.

plus de ressources pour Divi

5 - Fuente personalizada a través de Divi Builder

¡Es la opción más fácil! Una vez que hayas encontrado tu(s) fuente(s) ideal(es) y tengas sus archivos, aquí están los pasos para instalarlos 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 que esté en posesión de una fuente en formato .ttf o .otf. Por seguridad, deberías tener ambos, al menos estás a salvo...

Por lo tanto, si sólo tienes uno de dos, puedes usar un..:

Convertir une police TTF en OTF
Convierte una fuente OTF en TTF con Convertio.co
  1. Ve al convertidor Convertio.co y sube tu archivo TTF o OTF. Para mi ejemplo, este es AlexBrush-Regular.ttf.
  2. Elija el formato en el que este archivo debe ser convertido. En mi caso, elijo OTF porque ya tengo el archivo TTF.
  3. Validar haciendo clic en Convertir.
  4. Sube tu archivo, lo vas a necesitar...

Allí, ahora está en posesión de los archivos OTF y TTF.

5.2 - Importar fuentes personalizadas a través de Divi Builder

El resto del proceso es simple:

Insérer des Polices Personnalisées Divi
Importar fuentes en Divi Builder
  1. Abrir una publicación (página o artículo) con el Divi Builder e insertar un Módulo de texto. Ve a la pestaña Estilo para establecer la fuente haciendo clic en el menú desplegable.
  2. En el menú desplegable, elija "En línea".
  3. Elija los archivos para la fuente personalizada. También recuerde nombrar su fuente. Para mi ejemplo, la llamé Alexa.
  4. Importa al menos archivos OTF y TTF.
  5. Validar haciendo clic en subir.

Ahora, su política personalizada debería ser funcional...

5.3 - Configuración de una fuente personalizada por defecto

Ahora que tienes tu fuente personalizada, podrías establecerla como "predeterminada" para todo el sitio.

De esta manera, no tienes que configurar tu nueva fuente cada vez que usas el Divi Builder, lo que te ahorra mucho tiempo.

Police Par Defaut
Definir las fuentes de todo el sitio.

Sólo tienes que ir a la pestaña Apariencia > Personalizar > Configuración general > Tipografía y seleccionar tu nueva fuente. Puedes establecer tu fuente para todos los títulos de tu sitio (fuente del encabezado) así como tu fuente para el cuerpo del sitio.

5.4 - Problema al importar su póliza en Divi

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

A veces no puedes importar tu fuente personalizada en el Divi Builder, que dice..:

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

Hay dos soluciones para corregir el problema:

5.4.1 - Solución n°1: arreglar vía wp-config.php

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

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

Por favor, ten en cuenta que por razones de seguridad, tendrás que borrar esta línea de código tan pronto como hayas terminado de importar tus fuentes personalizadas a Divi!

5.4.2 - Solución n°2: corregir la utilización de una extensión

Si no se siente cómodo con el manejo de archivos dentro de su servidor, entonces prefiera usar un :

Autoriser Ttf Otf WordPress
Permitiendo que los archivos OTF y TTF en WordPress
  1. Ve a la pestaña Extensiones > Añadir y busca la extensión Tipos de mímica más. Instálalo y actívalo.
  2. Ve a la pestaña Tipos de mímica más > Editar tipo de mímica.
  3. Para permitir los archivos OTF: nota otf en el campo de extensión, font/otf en el campo Tipo de mimo y elegir Documento como un tipo de archivo.
  4. Para autorizar los archivos TTF Anota... ttf en el campo de extensión, font/ttf en el campo Tipo de mimo y elegir Documento como un tipo de archivo.

Eso es todo, puede reiniciar la importación (paso 5.2 de este artículo) y ya no debería encontrarse con el problema.

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

Existe otra solución para implementar una nueva fuente en tu sitio de WordPress, es el método @font-face. Esto funciona para cualquier tema, no sólo para Divi.

Sólo tienes que añadir tus archivos de fuentes personalizadas dentro del tema de tu hijo y añadir unas cuantas líneas de código en su archivo style.css.

Font Squirrel Converter
Convertir fuentes con FontSquirrel
  1. Nos vemos en el La página web oficial de FontSquirrel y descargue el archivo de fuentes personalizadas que tiene en su poder (OTF o TTF por ejemplo).
  2. Seleccione el modo EXPERTO.
  3. Comprueba todos los formatos de archivo.
  4. Deje las otras opciones como están y acepte las condiciones. Haga clic en el DESCARGA TU KIT.
  5. Ahora está en posesión de una carpeta que contiene varios archivos. Selecciona los 5 formatos de fuente (EOT, SVG, TTF, WOFF y WOFF2) y colócalos en la raíz de tu tema infantil Divi.
Css Divi Police
Hoja de estilo CSS para fuentes personalizadas
  1. Luego abra el archivo stylesheet.css del tema de su hijo y coloque el código contenido en el archivo stylesheet.css proporcionado por FontSquirrel. Este código se parece a este:
@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 verse 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 pueden ver en el código anterior, la fuente "goldie_rainbowregular" se utiliza para los títulos de nivel 1, 2 y 3. El segundo valor (Arial) y el tercero (sans-serif) son fuentes de respaldo que serán tenidas en cuenta por los navegadores en caso de que no puedan cargar su fuente personalizada.

Puedo imaginar 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 se aplica 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 Divi Builder (esto puede suceder).

Así es como se hace:

Custom Font Divi
Añadiendo una fuente personalizada a través del tema Divi
  1. Ve al Fuentes de Google. Busca tu fuente y selecciónala haciendo clic en +Selecciona este estilo.
  2. Se abre un panel lateral.
  3. En la pestaña Incrustarencontrarás el código a implementar en Divi. Copia el primero.
  4. Vuelva a la administración de su sitio en Divi > Opciones de Tema > Pestaña de Integración y pegue este Código Corto en el primer campo, el del sitio. El código debería ser así:
 
  1. Entonces, tendrás que definir en tu hoja de estilo CSS qué elementos deben usar esta nueva fuente. Por ejemplo, si quiero que mis títulos H4 usen la fuente Lobster, aquí está el código a añadir en la pestaña Apariencia > Personalizar > CSS adicional :
h4 {
font-family: 'Lobster', cursive;
font-size: 24px;
}
  1. 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...

Las fuentes, los colores y las imágenes son los elementos más importantes en una carta gráfica y en el diseño de un sitio web. Como siempre con WordPress, hay una variedad de formas de lograrlo. Espero que este tutorial le haya ayudado a entender mejor cómo usar WordPress y Divi y le habrá ayudado a avanzar con sus proyectos de sitio.

Para ir más lejos, aquí hay una lista de lectura 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 debería gustarte:

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 sus imágenes sean más gráficas y dan originalidad a su diseño. ¿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.

14 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 !

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.

Ponerlo en el interés

Acciones
Comparte esto