Por qué algunas fuentes web cambian después de que envías un newsletter

Puede que notes en ocasiones que la tipografía o fuente de tu newsletter cambia cuando llega a tu bandeja de entrada. Esto se debe a que no todos los dispositivos/clientes de correo electrónico admiten todos los tipos de letra.

Al diseñar un newsletter, puedes utilizar dos tipos de fuentes: fuentes web y fuentes web seguras.

Las fuentes web son tipografías utilizadas por los diseñadores web que pueden no estar instaladas en el dispositivo del usuario. En su lugar, las fuentes o tipografías se cargan y se muestran junto con la página web.

Lo mismo ocurre con los newsletters por correo electrónico; las campañas que envías a tus suscriptores se procesan utilizando sus distintos proveedores de correo electrónico. Dado que las fuentes web no son tipografías predeterminadas que suelen estar disponibles en todos los dispositivos y clientes de correo electrónico, es posible que la tipografía que elijas no sea compatible con el cliente de correo electrónico al que envíes el mensaje.

Si la fuente web que eliges para tu newsletter no es compatible con el cliente de correo electrónico del destinatario, se mostrará en su lugar una "fuente web segura" por defecto.

Algunos ejemplos de fuentes web son:

• Open Sans

• Roboto

Las fuentes seguras para la Web son tipografías predeterminadas que se encuentran en la mayoría de los distintos sistemas operativos y dispositivos.

Algunos ejemplos de tipografías seguras para la web son:

• Arial

• Times New Roman

• Verdana

• Georgia

• Courier

Puedes encontrar una lista detallada de fuentes seguras para la web aquí.

Los siguientes clientes de correo electrónico son compatibles con las fuentes web:

• iOS mail

• Apple Mail

• Outlook for Mac

• Outlook app

• Google Android

• Samsung Mail (Android 8.0)

• Thunderbird

A continuación, encontrarás una lista de todas las fuentes web que puedes encontrar y utilizar en los correos electrónicos, formularios, landing pages y sitios web de MailerLite. Ten en cuenta que no todas son fuentes seguras para la web.

Utilizar fuentes personalizadas parece una gran idea para atraer la atención de tus suscriptores. Sin embargo, no todos los clientes de correo electrónico admiten todas las fuentes personalizadas, lo que significa que el texto puede mostrarse con una tipografía predeterminada diferente. 

No obstante, si aún así quieres utilizar fuentes personalizadas en tus newsletters, puedes seguir estas instrucciones.

Para añadir una fuente personalizada a tu newsletter creado en el editor de arrastrar y soltar:

1. Busca una tipografía de tu elección. En este ejemplo, utilizaremos Google Fonts.

2. En la página de la fuente, haz clic en + Seleccionar este estilo para abrir un panel lateral. 

3. Elige Enlace y copia el código que se muestra a continuación.

4. En el editor de arrastrar y soltar, añade un bloque de código personalizado en la parte superior del newsletter y haz clic en el bloque. 

5. En el panel lateral derecho, pega el código en el campo de texto.

Ahora puedes empezar a utilizar la fuente en cualquier parte del newsletter. Para utilizarlo en todos los bloques de texto de la campaña, tienes que añadir otro fragmento de código en el mismo bloque de código personalizado:

<style>p { !important }</style>

Después de añadirlo, dirígete a la página de Google Fonts y copia el texto de las reglas CSS para especificar las familias.

Entre las llaves { } y antes de !important, pega el texto que has copiado en el paso anterior, como se muestra en el ejemplo siguiente:

<style>p { font-family: 'Acme', sans-serif !important }</style>

Para utilizar la fuente personalizada en toda la campaña, incluyendo el texto, el título, los subtítulos y los botones, sustituye p con el asterisco *.

<style>* { font-family: 'Acme', sans-serif !important }</style>

You may notice on occasion that your newsletter font changes when it reaches your inbox. This is because not all devices/email clients support all fonts.

When designing a newsletter, there are two types of fonts you can use— web fonts and web safe fonts.

Web fonts are fonts used by web designers that might not be installed on the viewer’s computer. Instead, the fonts are loaded and displayed along with the webpage.

The same goes for email newsletters; campaigns that you send to your subscribers are rendered using their various email providers. Because web fonts are not default fonts typically available on all devices and email clients, the font you choose may not be supported by the email client you’re sending to.

If a web font you choose for your newsletter is not supported by the recipient's email client, a default “web safe font” will be displayed instead.

Some examples of web fonts include:

• Open Sans

• Roboto

Web-safe fonts are default fonts found across the majority of different operating systems and devices.

Some examples of web-safe fonts include:

• Arial

• Times New Roman

• Verdana

• Georgia

• Courier

You can find a detailed list of web-safe fonts here.

The following email clients have good support for web fonts:

• iOS mail

• Apple Mail

• Outlook for Mac

• Outlook app

• Google Android

• Samsung Mail (Android 8.0)

• Thunderbird

Below, you can find a list of all of the web fonts you can find and use within MailerLite's emails, forms, landing pages, and websites. Keep in mind that not all of these are web-safe fonts.

Using custom fonts sounds like a great idea to attract your subscribers’ attention. However, not all email clients support all custom fonts, which means that the text may be displayed in a different default font. 

Nonetheless, if you’d still like to use custom fonts on your newsletters, you can follow these instructions.

To add a custom font to your newsletter built in the Drag & drop editor:

1. Locate a font of your choice. In this example, we will use Google Fonts.

2. On the font’s page, click + Select this style to open a side panel. 

1. Choose Link and copy the code shown below.

1. On the Drag and drop editor, add a custom code block all the way to the top of the newsletter and click the block. 

2. On the right side panel, paste the code on the text field.

You can now start using the font anywhere in the newsletter. To use it on all text blocks in the campaign, you need to add another piece of code in the same custom code block:

<style>p { !important }</style>

After adding it, head to the Google Fonts page and copy the text under CSS rules to specify families. 

Between the curly brackets { } and before !important, paste the text you copied in the previous step, as shown in the example below:

<style>p { font-family: 'Acme', sans-serif; !important }</style>

To use the custom font in the entire campaign, including text, title, subtitles, and buttons, replace the p with an asterisk *.

<style>* { font-family: 'Acme', sans-serif; !important }</style>