Tipografias personalizadas en E-mails y Newsletters 📧

¿Te gustaría añadir Tipografias personalizadas / custom-fonts en tus E-mails y Newsletters HTML+CSS?

Si bien, como sabes, vincular una hoja de estilos con URL propia no es compatible con todos los clientes de correo electrónico, sí lo es usar entre las etiqueta <style> el método font-face vinculando la dirección externa donde esté alojada nuestra tipología o fuente.

Aquí tienes un ejemplo de código:

<style type="text/css">
@media screen {
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }
 
  ...
 
  body {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  }
</style>

Fuente y Vía: CSS-Tricks – You Kinda Can Use Custom Fonts in HTML Email