Fuentes personalizadas Divi: ¿Cómo funciona?

Uno Fuente personalizada Divi es 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 usar fuentes específicas que han sido hechos a medida para el proyecto o han sido comprados en una plataforma dedicada. Así que estamos lejos de lo eterno Google Fonts Que encontramos en todas partes.

En este artículo, explicaré cómo implementar una fuente personalizada en sus proyectos Divi. Usted verá que hay varias maneras, algunos simples y otros más complejos.

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... Es por eso que utiliza una fuente personalizada – también llamada Fuente 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ágina y haga clic en "Pruébalo GRATIS"

3 – Fuente personalizada vs Google Font

Aquí hay una pregunta que se puede preguntar: ¿por qué molestarse en usar una costumbre desde la mayoría de los temas de WordPress, incluyendo Divi, permiten utilizar el catálogo de Google 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 API proporcionó las fuentes solicitadas al visitar una página web de los servidores de Google. Todo está almacenado 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 política de privacidad tendrá que informar a su visitante según lo requerido por el GDPR. También tendrá que vincularse con la política de privacidad de Google. Para saber más sobre esto, le aconsejo que leer este artículo en detalle.

Es también por estas razones que Divi propone desactivación de fuentes Google Fonts para su proyecto:

Para desactivar las fuentes de Google de Divi, sólo vaya a la pestaña Divi Opciones temáticas General y desmarque la opción de usar 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 gratuitas Es lo primero que recuerdo.

En segundo lugar, necesitamos saber que hay Fuentes Premium, es decir. fuentes pagadas. En este caso, consulte la licencia de estas fuentes ya que algunas pueden ser utilizadas en su proyectos comerciales y otros sólo en su proyectos personales. Asegúrate de averiguarlo.

Por último, aquí hay una lista de sitios donde se pueden encontrar hermosas fuentes:

• Font Squirrel
• Dafont
• Mercado creativo
• Tipokit
• Mis fuentes
• Font Shop

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 como Tipospiración o FontJoy encontrar el equilibrio adecuado entre los dos.

5 - Fuente personalizada a través del Divi Builder

¡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 – Ser en posesión de .tf y .otf archivos al menos

Dependiendo de las plataformas en las que encontró sus fuentes, puede estar en posesión de una fuente en formato .tf o .otf. Para seguridad, necesitas ambos, al menos estás callado...

Así que si sólo tiene uno en dos, puede utilizar un convertidor de archivos:

1. Nos vemos en el convertidor Convertirio.co y descargar su archivo TTF o OTF. Por mi ejemplo, 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 Convertir.
4. 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:

1. Abrir una publicación (página o artículo) con el Divi Builder e insertar un Módulo de texto. Vaya a la pestaña Estilo para configurar la fuente haciendo clic en el menú desplegable.
2. Desde el menú desplegable, elija "En línea".
3. Elija archivos de fuentes personalizados. Piensa en nombrar a tu policía. Por mi ejemplo, lo llamé Alexa.
4. A una importación mínima de archivos OTF y TTF.
5. 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 hacerlo asignar el papel predeterminado 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ña Aspecto > Personalizar > Ajustes generales > Tipografía y 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 tu fuente en Divi

5.4.1 – Solución #1: correcta vía wp-config.php

Si usted está cómodo con WordPress, su servidor y su software FTP, sólo va a editar el archivo wp-config.php presente 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 utilizar una extensión dedicada:

1. Vaya a la pestaña Prórrogas Añadir y buscar la extensión Mime Types Plus. Instala y activalo.
2. Vaya a la pestaña Tipos de Mime Plus Editar tipo Mime.
3. Para permitir archivos OTF: nota otf en el campo de extensión, font/otf en el campo Mime Tipo y elegir Documento como un tipo de archivo.
4. Para permitir archivos TTF Nota: t en el campo de extensión, font/tff en el campo Mime Tipo y elegir Documento como un tipo de archivo.

Aquí puede comenzar de nuevo la importación (Step 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 para implementar una nueva fuente en tu Palabra Sitio de prensa, es el @font-face method. Este 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 archivo estilo.css.

1. Nos vemos en sitio web oficial de FontSquirrel y descargar el archivo de fuente personalizado que tiene en su posesión (por ejemplo, OTF o TTF).
2. Seleccione el modo EXPERTO.
3. Revise todos los formatos de archivo.
4. Deje las otras opciones en su posición y acepte los términos. Haga clic Deja tu mano.
5. 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 su Divi child theme.

6. Entonces abre el archivo estilo.css de su niño tema y colocar el código en el archivo estilossheet.css proporcionado 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;
}

7. 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) son Policía de emergencia que 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 para añadir fuentes personalizadas en Divi. Esto es válido si tu font is hosted elsewhere on the Web o si necesitas fuente Google Font que todavía no está disponible en el Divi Builder (Esto puede suceder).

Así es como:

1. Visite el sitio web Google Fonts. Encontrar su fuente y seleccionarlo haciendo clic en +Seleccione este estilo.
2. Se abre un panel lateral.
3. En la pestaña Embed, usted encontrará el código para implementar en Divi. Copia el primero.
4. Volver a la administración de su sitio en la pestaña Divi Opciones temáticas Integración y pega este código en el primer campo, sección el sitio. El código debe verse así:

 <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

5. 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ía Langosta, aquí está el código para añadir a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional :

h4 {
font-family: 'Lobster', cursive;
font-size: 24px;
}

6. 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 de una carta gráfica y en un diseño de sitio web. Como todo el tiempo con WordPress, hay varias maneras de lograr sus fines. Espero que este tutorial le ayude a entender mejor el funcionamiento de WordPress y Divi y 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.