06 diciembre 2018

Cómo Añadir y Usar Fuentes Personalizadas con Stripo

Hanna Kuznietsova Jefe de contenido en Stripo

El 26 de noviembre lanzamos una nueva opción, ahora con Stripo.email puedes añadir fuentes personalizadas a los proyectos con solo unos cuantos clics y sin necesidad de saber HTML. ¿Por qué es tan importante?
No es secreto que una buena copia complementa al diseño del email y convence a los clientes de hacer una compra.
Haz que la copia del texto sea emotiva. Y usando una fuente que sea adecuada a la situación y el mejor diseño para tu email, haces que sea más distinguible, atractivo e interesante. Muy a menudo, las fuentes web no son suficiente.

En este caso necesitarás lidiar con fuentes personalizadas.

La mayoría de los ESP y creadores de email ofrecen solo fuentes web. Mientras que Stripo.email ofrece 4 juegos de fuentes.

Los juegos de fuentes que ofrece Stripo

Stripo ofrece 4 juegos de fuentes para tus emails:

1. Fuentes estándar/web

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, Verdana son las fuentes más populares, pues son usadas en gran medida por los sitios web y son mostradas correctamente por la mayoría de los clientes de email.

2. Fuentes no estándar

Estas son las 10 fuentes que algunos profesionales todavía discuten sobre si funcionan bien en web o no. Pero son comúnmente usadas en la web. Por ejemplo, Playfair Display se encuentra en casi 1100 millones de sitios web, es muy popular en EE.UU. y Europa Occidental.

Nota: ¿sabías que puedes disminuir el número de fuentes estándar y no estándar para tus proyectos si piensas que hay demasiadas?
En tu cuenta:

  • ve a los ajustes del proyecto;
  • encuentra la pestaña de fuentes;
  • haz clic en el botón para quitar la fuente de tu lista.

3. Fuentes para Banner

Son decorativas y pueden aplicarse solo a banners, ya que el texto que coloques sobre un banner será considerado elemento de imagen. Por eso, se mostrará correctamente en todos los dispositivos, sin importar qué fuente uses.
Stripo ofrece más de 40 fuentes de esas.

Verás la lista de estas fuentes solo cuando trabajes con banners.

4. Fuentes personalizadas

Con Stripo, puedes añadir absolutamente cualquier fuente que quieras.
No hay límites al número de fuentes personalizadas.
Una vez que instales las fuentes, aplícalas al menú, textos, a todas las copias de emails, excepto a banners.

Cómo añadir una fuente personalizada a tus ajustes de proyecto con Stripo:

Una vez más, quiero resaltar que este es un proceso muy sencillo, pues no necesitas hacer ningún cambio al código HTML del email. Otra gran noticia es que no necesitas establecer la misma fuente para cada plantilla en la que trabajes, la estableces para proyectos enteros. Están disponibles en tu lista en todas tus campañas con estos proyectos.
Primero que nada, necesitas encontrar la fuente que más te guste. A mí me encantó la Good Vibes que encontré en Google.fonts. No solo le da a Google cerca de 1.000 fuentes, sino que también ofrece pares populares.
Entonces, necesitas seleccionar la fuente, y hacer clic en el signo "más”.

En una ventana emergente, copia el vínculo, está resaltado en la captura debajo.

Para instalarla a tu cuenta con Stripo, necesitas:

  • hacer clic en el nombre de cuenta en la esquina superior derecha de la pantalla;
  • seleccionar “Organization settings” ("Ajustes de la organización");

  • a la izquierda verás “Projects” ("Proyectos"), haz clic en la pestaña;

  • seleccionar el proyecto que vas a enriquecer con una nueva fuente (yo solo tengo una);
  • hacer clic en el botón “Settings” ("Ajustes"); 

  • bajar hasta ver el párrafo “Font management" ("Gestión de fuentes");
  • hacer clic en el botón “Add custom font” ("Añadir fuente personalizada"), yo ya tengo tres fuentes personalizadas;

  • en el formulario emergente, dale un nombre a la fuente, inserta la URL incrustada e ingresa la familia de fuente especificada por Google.

Nota: para tu conveniencia, recomendamos dar nombres reales a las fuentes cargadas.
Una vez que hayas completado los campos correctamente, haz clic en “Connect” ("Conectar").
En la lista desplegable de fuentes, encontrarás las nuevas.

Cómo usar fuentes personalizadas

Puedes aplicar cualquier fuente que quieras a los bloques de texto y menús para hacer que tus emails sean vívidos y únicos. Pero asegúrate de probar la compatibilidad con los principales clientes de email y varios dispositivos.
Nota: si un cliente de email no tiene soporte para la fuente que has elegido, el cliente reemplazará la fuente con una por defecto (la mayoría de los clientes tienen dos fuentes predeterminadas).
Stripo no solo recomienda probar los emails/fuentes con Email on Acid o Litmus, sino también enviar este email a todas tus direcciones de email para ver cómo luce la fuente en realidad.
Para mi prueba, yo elegí la fuente Great Vibes. La herramienta de pruebas mostró que la mayoría de los dispositivos y clientes reemplazarán Great Vibes con la predeterminada, Arial (si no hay Arial en tu SO, entonces Gmail aplica Helvetica). Pero en realidad, mi fuente personalizada funcionó bien en mi casilla.

(Cliente — Gmail; SO — Windows 10).

Al elegir una nueva fuente para tus emails, recuerda:

  1. Las fuentes sans-serif ofrecen una percepción más sencilla, y es más apropiada para textos formales y boletines de negocios;
  2. A uno le lleva más tiempo leer un texto escrito en serif, pero funciona mejor para los emails promocionales;
  3. Para emails HTML, 14 px es el mejor tamaño de fuente, pero para dispositivos móviles, el mejor tamaño es 16 px.
  4. Para que tus emails sean más accesibles, evita los fondos blancos y textos alineados al centro;
  5. En tu cuenta de Stripo, puedes añadir nuevas fuentes y quitar las que no uses para proyectos particulares.

Añade a tu cuenta y usa fuentes decorativas para darle un toque a tus plantillas de boletines de noticias.

6 comentarios
Hey, thanx a lot!
Reinhard, Thanks for your supportive feedback. We're glad you liked it :)
А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?
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. Будем рады помочь.
а если есть только файл со шрифтом? Его никак не загрузить?
Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.