Cómo añadir y utilizar fuentes personalizadas con Stripo

El 26 de noviembre de 2018, lanzamos una nueva opción: ahora, con Stripo, puedes añadir fuentes personalizadas a los proyectos en tan solo unos clics y sin conocimientos de HTML. ¿Por qué es importante?

No es un secreto que un buen copy complementa el diseño del correo electrónico y convence a los clientes de realizar una compra.

Por lo general, las fuentes personalizadas se utilizan para que el texto de la copia consistente y atractivo. Y si lo envolvemos en un tipo de letra que se adapte mejor a la situación y al diseño del correo electrónico, conseguiremos que el texto sea notorio y atractivo. Por lo tanto, muy a menudo, las fuentes seguras para la web no son suficientes.

En este caso, tendrá que tratar con fuentes personalizadas.

Mira un breve vídeo que explica cómo añadir fuentes personalizadas con Stripo. Por favor, ten en cuenta que esta función sólo está disponible para los planes de pago.

La mayoría de los ESP y constructores de correo electrónico sólo ofrecen fuentes seguras para la web, mientras que Stripo ofrece cuatro conjuntos de ellas:

Los conjuntos de fuentes que ofrece Stripo

Stripo ofrece cuatro conjuntos de fuentes para sus correos electrónicos:

1. Fuentes estándar/seguras para la web

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS y Verdana son las fuentes, más populares, ya que son ampliamente utilizadas por los sitios web y se muestran correctamente en la mayoría de los clientes de correo electrónico.

2. Fuentes no estándar

Estas son las fuentes que algunos profesionales todavía discuten sobre si son seguras para la web o no. Pero son de uso común en la web. Por ejemplo, Playfair Display aparece en casi 1.100 millones de sitios web, populares sobre todo en Estados Unidos y Europa Occidental.

Nota: ¿sabías que puedes disminuir el número de fuentes estándar y no estándar para tus proyectos si encuentras algunas excesivas?

Cómo eliminar las fuentes innecesarias de la lista:

• ve a la configuración del proyecto en tu cuenta;
• busca la pestaña de fuentes estándar/no estándar;
• haga clic en el botón de cambio para eliminar la fuente de su lista.

3. Fuentes de banner

Son decorativas y sólo pueden aplicarse a los banners, ya que cualquier texto que coloques sobre los banners se considerará un elemento de imagen. En consecuencia, se mostrará correctamente en todos los dispositivos, independientemente de la fuente que aplique.

Stripo ofrece más de 40 de ellas.

La lista de estas fuentes sólo se ve cuando se trabaja con un pie de foto sobre los banners.

4. Fuentes personalizadas

Con Stripo, puedes añadir absolutamente cualquier fuente que quieras.

No hay límites en el número de fuentes personalizadas a añadir.

Una vez que instales las nuevas fuentes, aplícalas al menú y a los textos - a todas las copias en los correos electrónicos excepto a los banners.

Cómo añadir una fuente personalizada a la configuración de su proyecto con Stripo:

Una vez más, quiero destacar que se trata de un proceso muy sencillo, ya que no necesitas hacer ningún cambio en el código HTML del correo electrónico. Otra gran noticia es que no necesitas establecer las mismas fuentes nuevas para cada plantilla de correo electrónico con la que trabajas - las estableces para proyectos enteros. Están disponibles en su lista a través de todas sus campañas dentro de estos proyectos.

Paso 1. Google

En primer lugar, tienes que encontrar la fuente que más te guste. A mí me encantó la Great Vibes que encontré en Google Fonts. Además de más de 1.000 fuentes, Google también ofrece emparejamientos populares con ellas.

• Así, tienes que seleccionar la fuente, desplazarte hasta la sección "Estilos" y hacer clic en el signo "más";

• luego, hacer clic en el icono "Ver familias seleccionadas" en la esquina superior derecha de la página web;

• en una ventana emergente, copie el enlace - está resaltado en la captura de pantalla de abajo.

Paso 2. Stripo

Para instalarlo en tu cuenta con Stripo, necesitas:

• hacer clic en el nombre de la cuenta en la esquina superior derecha de tu pantalla;
• seleccionar "Configuración de la organización";

• a la izquierda, verás "Proyectos" - haz clic en la pestaña;

• selecciona el proyecto que vas a enriquecer con una nueva fuente (yo sólo tengo una);
• haz clic en el botón "Configuración";

• desplázate hacia abajo para ver la sección "Gestión de fuentes";
• hacer clic en el botón "Añadir fuente personalizada" (ya tengo tres fuentes personalizadas);

• en el formulario emergente, nombra la fuente, inserta el enlace URL de incrustación e introduce la familia de fuentes especificada por Google;

Nota: para su comodidad, recomendamos encarecidamente dar nombres reales a las fuentes subidas.

• Una vez rellenados correctamente todos los campos, haz clic en "Conectar".

Encontrarás las nuevas fuentes en la lista desplegable mientras editas tu correo electrónico.

Cómo añadir fuentes personalizadas que no son de Google a la configuración de tu proyecto con Stripo

Si no has podido encontrar la opción perfecta en Google Fonts, ¡no te preocupes! Puedes añadir cualquier fuente personalizada a tu cuenta de Stripo subiendo un enlace a esta fuente.

También puedes utilizar tus propias fuentes personalizadas:

• sube los archivos de las fuentes a un almacenamiento en la nube abierto o a una plataforma para compartir archivos;
• asegúrate de que los archivos están disponibles para su visualización para que los usuarios puedan verlos;
• añade el encabezado Access Control Allow Origin a tus archivos de fuentes para evitar que sean bloqueados por el navegador;
• añade los enlaces a tu cuenta de Stripo de la forma que hemos descrito anteriormente. Asegúrate de que tus enlaces comienzan con "https" y no están rodeados de comillas.

Este es un ejemplo de cómo agregar una fuente personalizada a su cuenta de Stripo con Adobe Fonts:

• ve a Adobe Fonts;
• elige la fuente que te guste y pulsa el botón </>;

• introduce el nombre de tu proyecto;
• elige los pesos y estilos de la fuente;
• haga clic en el botón "Crear";

• copiar el enlace;

• seguir los mismos pasos que hemos descrito anteriormente para añadir esta fuente a tu cuenta de Stripo.

Nota: si quieres utilizar fuentes de Adobe Fonts, no podrás hacerlo sin una suscripción a Creative Cloud.

Cómo utilizar fuentes personalizadas en los correos electrónicos

Puedes aplicar las fuentes que quieras a los bloques de texto y a los menús para que tus correos electrónicos sean vivos y únicos. Pero asegúrese de probar su compatibilidad con los principales clientes de correo electrónico.

Nota: si un cliente de correo electrónico no es compatible con la fuente que has elegido, el cliente la sustituirá por una predeterminada (la mayoría de los clientes de correo electrónico tienen dos fuentes predeterminadas).

Stripo te recomienda encarecidamente que pruebes los correos electrónicos y las fuentes con Email on Acid o Litmus, pero también que envíes este correo electrónico a todas tus direcciones de correo electrónico para ver cómo se ve tu fuente en la realidad.

Para mi prueba, he elegido la fuente Alumni Sans. Nuestra herramienta de pruebas de correo electrónico demostró que la mayoría de los dispositivos y clientes de correo electrónico sustituirían esta fuente por las predeterminadas. En las capturas de pantalla que aparecen a continuación, puedes ver que Apple Mail mostró la fuente Alumni Sans correctamente, mientras que Outlook 2019 la sustituyó por su fuente predeterminada.

Clientes de correo electrónico que admiten fuentes personalizadas en los correos electrónicos

Sólo hay algunos de ellos:

• Apple Mail (fuente predeterminada - Helvética);
• Apple iPhone (fuente por defecto - Helvética);
• Thunderbird (fuente por defecto — Impact);
• Outlook app for Android, iOS, and Mac (fuente por defecto — Calibri);
• Android native email app (fuente por defecto — Roboto).

Nota: no puedes estar completamente seguro de si tu fuente personalizada es compatible con estos clientes de correo electrónico, por lo que es crucial probar tu mensaje antes de enviarlo.

Cuando elijas una nueva fuente para los correos electrónicos, recuerda:

1. Sólo algunos clientes de correo electrónico admiten fuentes personalizadas.
2. Las fuentes sans-serif proporcionan una percepción más fácil y son más apropiadas para textos formales y boletines empresariales.
3. Las personas con problemas visuales y dislexia tardan más en leer un texto escrito en serif pero funciona mejor para los correos electrónicos de promoción .
4. Para los correos electrónicos HTML, 14 px es el mejor tamaño de letra, sin embargo, para los dispositivos móviles, es 16 px.
5. Para que tus correos electrónicos sean accesibles, evita los fondos blancos y los textos alineados al centro.
6. En tu cuenta de Stripo, puedes añadir nuevas fuentes y eliminar las que no utilices para determinados proyectos.

Conclusión

Las fuentes personalizadas pueden ser una herramienta impresionante para hacer que tus correos electrónicos parezcan profesionales y reconocibles, pero es vital que pruebes tus mensajes antes de enviarlos. Añade fuentes decorativas a tu cuenta y utilízalas para dar vida a tus plantillas de correo electrónico.