La selección de fuentes ayuda a transmitir la identidad de tu marca y a mejorar la legibilidad de tus emails. Brevo te permite elegir entre una variedad de opciones de fuentes para ayudarle a crear hermosos emails que tengan impacto en tu audiencia y mejoren el reconocimiento de tu marca.
❓ ¿Qué fuentes puedo utilizar para diseñar mi email?
A la hora de diseñar tu email, puedes utilizar:
Una fuente web segura es una fuente que probablemente esté disponible en la gran mayoría de los dispositivos de los usuarios. Las fuentes seguras se pueden usar como fuentes alternativas en caso de que las fuentes seleccionadas originalmente no sean compatibles con el dispositivo del destinatario. Si eliges fuentes seguras para utilizarlas como fuentes alternativas, puedes evitar posibles problemas con la representación de las fuentes y asegurarte de que tus emails no pierden el impacto buscado independientemente del dispositivo en el que se lean.
Google Fonts es una biblioteca de fuentes gratuitas de código abierto proporcionadas por Google que se pueden descargar para utilizarlas en diferentes proyectos digitales. Las fuentes de Google son compatibles con los siguientes clientes de email:
|
|
Brevo te permite usar tus propias fuentes en el editor de emails para diseñar mensajes con tu identidad de marca, lo que garantizará la coherencia y el reconocimiento de la marca en todos los canales de comunicación.
Para utilizar una fuente personalizada en el editor de emails de Brevo, puedes:
Busca y selecciona una fuente de una biblioteca de fuentes de un sitio web público, como Google o Adobe Fonts API. Una vez que hayas seleccionado la fuente, copia el enlace del archivo CSS de dicha fuente. Este enlace contiene los estilos y las variantes de la fuente, y debe parecerse a:
https://fonts.googleapis.com/css2?family=Your+Font+Name:ital,wght@0,100;1,200&display=swapo
https://use.typekit.net/xxxxxxx.css
@font-face. Para usar una fuente personalizada de un archivo CSS:
- Carga el archivo que contiene la fuente personalizada en uno de los directorios del servidor. Los archivos de fuentes personalizadas suelen estar en formato .woff, .woff2 o .ttf.
Asegúrate de que sea accesible desde una URL directa, comohttps://yourserver.com/fonts/your-custom-font.woff2. - Crea un archivo CSS usando la regla
@font-facey añade el enlace del archivo de la fuente personalizada utilizando la URL mencionada anteriormente. Por ejemplo:@font-face {
font-family: 'Your Custom Font';
src: url('https://yourserver.com/fonts/your-custom-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
} - Carga el archivo CSS en uno de los directorios del servidor.
- En función del dominio y de la ubicación del archivo CSS, recupera la URL del archivo CSS.
Por ejemplo, si el dominio es thegreenyoga.com, el archivo CSS se encuentra en el directorio css y el nombre del archivo CSS es thegreenyoga-font, la URL debería serhttps://thegreenyoga.com/css/thegreenyoga-font.css.
Una vez que hayas copiado el enlace del archivo CSS que contiene la fuente personalizada, sigue el procedimiento ➕ Add a custom font (Añadir una fuente personalizada) que se describe a continuación. El enlace debe estar en formato http://.
Antes de empezar
Puedes configurar tu biblioteca de marcas para que cada plantilla nueva que selecciones herede las propiedades de tu marca, como el logotipo, los colores, las fuentes y los enlaces a redes sociales. Para obtener más información, consulta nuestro artículo dedicado Guarda los activos de tu marca en la Biblioteca de marcas para crear diseños de email unificados.
🔤 Añadir fuentes al editor de email
Al diseñar tu email, en las listas desplegables de selección de fuentes se muestran de forma predeterminada las fuentes seguras. Sin embargo, puedes agregar y mezclar todos los tipos de fuentes (Google, seguras y fuentes personalizadas). También puedes configurar fuentes alternativas para los encabezados y los párrafos en caso de que las fuentes seleccionadas originalmente no sean compatibles con el dispositivo de los destinatarios.
Para agregar y configurar fuentes:
- En el editor de email, haz clic en Style (Estilo) en la barra lateral izquierda y expanda Text Appearance (Aspecto del texto).
- En el menú desplegable Paragraph (Párrafo) y Headings (Encabezados), puedes seleccionar fuentes seguras que estén disponibles de forma predeterminada. Sin embargo, puedes agregar fuentes personalizadas o de Google haciendo clic en + Add web fonts (Agregar fuentes web ⬇️.
- Serás redirigido a la página Add fonts (Agregar fuentes). Tienes varias posibilidades:
🖱 Seleccionar fuentes de Google
- Haz clic en el menú desplegable Font name (Nombre de fuente).
- Selecciona las fuentes que desee utilizar en la lista existente o introduce el nombre de una fuente para buscarla en la biblioteca de fuentes de Google.
- Opcional: Añade fuentes de sustitución en caso de que tus fuentes personalizadas no sean compatibles con el cliente de email de tu destinatario. En la sección Fallback font (Fuente de sustitución), selecciona las fuentes de sustitución que quieres utilizar para tus encabezados y otros textos.
- Haz clic en Add selected fonts (Añadir fuentes seleccionadas).
➕ Agregar una fuente personalizada- En la página Add web fonts (Añadir fuentes web), haz clic en la pestaña Custom font (Fuente personalizada) y en + Add custom font (+ Añadir fuente personalizada).
- En el campo Enlace a fuente web, escribe la dirección URL de la fuente.
Para obtener más información sobre cómo recuperar la URL de la fuente, consulta la información de la pestaña Fuentes personalizadas de ¿Qué fuentes puedo utilizar para diseñar mi email? - En el menú desplegable Font name (Nombre de la fuente), elige el nombre que quieres utilizar para la fuente. Automáticamente aparecerán los nombres definidos en el archivo CSS donde está guardada la fuente.
- Haz clic en Add to list (Agregar a la lista).
- En la pestaña Custom font (Fuente personalizada), selecciona la fuente personalizada que acabas de agregar para guardarla en la lista de fuentes.
- Opcional: Añade fuentes de sustitución en caso de que tus fuentes personalizadas no sean compatibles con el cliente de email de tu destinatario. En la sección Fallback font (Fuente de sustitución), selecciona las fuentes de sustitución que quieres utilizar para tus encabezados y otros textos.
- Haz clic en Add selected fonts (Añadir fuentes seleccionadas).
🎉 Ahora puedes seleccionar las fuentes que agregó en las listas desplegables de selección de fuentes del editor de email y aplicarlas a cualquier texto de tu email.
✍️ Editar o eliminar una fuente
Para editar las fuentes que has añadido:
- En el editor de email, haz clic en Style (Estilo) en la barra lateral izquierda y expanda Text Appearance (Aspecto del texto).
- Desplázate hacia abajo en la configuración de Text appearance (Aspecto del texto) y haz clic en + Add web fonts (+ Añadir fuentes web).
- Serás redirigido a la página Add fonts (Agregar fuentes). Allí puedes editar o eliminar las fuentes:
Desmarca las fuentes de Google que no deseas que aparezcan en las listas desplegables de selección de fuentes.
- Desmarca las fuentes personalizadas que no deseas que aparezcan en las listas desplegables de selección de fuentes.
- Haz clic en el icono Edit (Editar) para modificar el enlace o el nombre de la fuente personalizada.
- Haz clic en el icono de la papelera para eliminar permanentemente la fuente personalizada del editor de email.
En las listas desplegables, selecciona otra fuente para reemplazar la fuente alternativa que elegiste originalmente. - Haz clic en Add selected fonts (Añadir fuentes seleccionadas).
⏭ ¿Qué es lo siguiente?
- Usar bloques de contenido (texto y enlaces, imágenes, botones, etc.)
- Cómo configurar el estilo de tus emails
🤔 ¿Tiene alguna duda?
Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.
Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con un socio certificado de Brevo.