timer ~ 8 min. leídos
103598 vistas
valóralo
15 noviembre 2022

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

Stripo / Blog / 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.

Ejemplo de Banner con fuentes personalizadas _ Stripo

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.

Cómo añadir fuentes personalizadas con Stripo

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.

Fuentes personalizadas Arial _ Stripo

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.

Fuentes personalizadas de Display Fair _ Stripo

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.

Ejemplo de fuentes personalizadas para banners _ Stripo

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";

Fuentes personalizadas de Google _ Stripo

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

Ver familias seleccionadas en Google Fonts

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

Stripo Custom Fonts _ Incrustar tu enlace

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ñadir una fuente personalizada a tu cuenta de Stripo

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

Fuentes personalizadas de Stripo _ Tus proyectos

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

Fuentes personalizadas _ Ajustes del proyecto en la cuenta de Stripo

  • 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);

Fuentes personalizadas de Stripo _ Haz clic para añadir tu fuente personalizada

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

Conectar tu fuente personalizada

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 </>;

Elige tu fuente personalizada en Adobe Fonts

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

Adobe Fonts _ Añadir una fuente a un proyecto web

  • copiar el enlace;

Adobe Fonts _ 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.

Activación de fuentes en Adobe Fonts

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.

Cómo probar las fuentes personalizadas en varios clientes de correo electrónico

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.

Enriquece tus correos electrónicos con fuentes personalizadas

Dave Myron hace 2 años

Can you update this article to include using non-Google custom fonts?

Hanna Kuznietsova comentado en Dave Myron hace 2 años

Dave, Hello... Thank you for your question. We will update the post soon ? As for non-Google custom fonts: You can add custom fonts to your Stripo account only by uploading a link to the selected font. For example, the Adobe Fonts site https://fonts.adobe.com/collections offers links to the fonts and their description ("font-family") for entering information in the proper fields. The embedding link provided by Adobe Fonts needs to be converted to the format specified in the article or input field: it must start with https; no quotes before and after the link. Please do everything as you would do to Google Fonts, as shown in the video. https://www.youtube.com/watch?v=U2X3CLN01zA You can also use your fully custom fonts. Just upload them on your website, and then add the link to your Stripo account. Proven - Adobe fonts work well :) If you need more detailed instructions with screenshots, please write to us at contact@stripo.email.

Reinhard Jung hace 2 años

Hey, thanx a lot!

Hanna Kuznietsova comentado en Reinhard Jung hace 2 años

Reinhard, Thanks for your supportive feedback. We're glad you liked it :)

Arsen Malashchuk hace 3 años

А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?

Hanna Kuznietsova comentado en Arsen Malashchuk hace 3 años

Arsen, Спасибо за обращение. Добавлять кастомные шрифты в Ваш аккаунт в Stripо можно только лишь подгружая ссылку на выбранный шрифт. Например, сайт Adobe Fonts https://fonts.adobe.com/collections предлагает именно ссылки к шрифтам и их описание ( "font-family", обычный это шрифт или курсив) для введения информации в соответствующие поля. Ссылку для встраивания, которую предоставит Adobe Fonts, вам нужно привести к формату, который обозначен в статье или поле для введения: начинаться она должна с https; никаких кавычек до и после ссылки. Делайте, пожалуйста, все по аналогии со шрифтами Google Fonts, как показано в видео. https://www.youtube.com/watch?v=U2X3CLN01zA Проверено — шрифты Adobe подгружаются и работают :) Если же Вам понадобится более подробная инструкция со скриншотами, — пожалуйста, пишите нам на contact@stripo.email. Будем рады помочь.

Евгения Землянская comentado en Hanna Kuznietsova hace 2 años

а если есть только файл со шрифтом? Его никак не загрузить?

Hanna Kuznietsova comentado en Евгения Землянская hace 2 años

Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.

Te podría interesar

anterior siguiente
banner9
06 junio 2022 · 15 min. leídos
Los 10 mejores creadores de plantillas de correo electrónico para 2022

¿Todos los creadores de plantillas de correo electrónico parecen iguales? Ahora estás confundido sobre cuál elegir para tus campañas de correo electrónico, ¿no es así? No es de extrañar, ya que hay muchos. Vamos a hacer un estudio de los constructores más populares para encontrar sus características distintivas para ayudarle a encontrar el mejor constructor de correo electrónico HTML para sus necesidades actuales. Intentaré crear una plantilla en todos estos editores con los mismos archivos multimedia para ver si los...

Diseño Marketing Plantillas
best-fonts-for-email-cover-image-stripo
24 mayo 2022 · 18 min. leídos
Los mejores tipos de letra para el correo electrónico: Consejos y trucos de uso

Una de las preocupaciones más llamativas en el proceso de producción del correo electrónico es la elección del tipo de letra adecuado. El peso, la altura, la anchura, el color, la forma, el espaciado... ¿Todo es importante? Sí, lo es, pero también una de las cosas más cruciales es elegir la fuente que sea legible. En este post, vamos a mostrarle cómo elegir la mejor fuente profesional para el correo electrónico. Diseñe elegantes correos electrónicos con Stripo en un abrir...

Diseño Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 octubre 2021 · 10 min. leídos
16 grandes ejemplos de GIFs animados en correos electrónicos

Los GIFs en los correos electrónicos serán de gran utilidad si quieres mostrar tu producto, llamar la atención de los usuarios sobre ciertos elementos, o simplemente decorar ligeramente tu texto. En este artículo, hemos proporcionado algunos de los mejores ejemplos de animación gif en correos electrónicos. Ejemplos de GIFs animados en correos electrónicos Aquí tienes una recopilación de los mejores ejemplos con GIFs en correos electrónicos. Cada GIF cumple su misión. 1. Adidas (Fuente: Correo electrónico de Adidas) Adidas utilizó...

Diseño Marketing
08 abril 2021 · 17 min. leídos
Los 14 mejores ejemplos de diseño de firmas de correo electrónico

Las buenas firmas de correo electrónico nos ayudan a construir nuestro negocio y a causar una buena impresión a los clientes. Dado que es el último elemento que la gente ve en los correos electrónicos, debemos hacer que nuestras firmas personales sean creativas y memorables. Examinemos los mejores ejemplos de firmas de correo electrónico y su uso apropiado en correos electrónicos y plantillas de boletines para correo electrónico. Cabe mencionar que todos los tipos de negocios requieren firmas de correo electrónico...

Diseño Marketing Plantillas
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones