0

My client wants tu use a custom font in a HTML email. I know this has some compatibility issues in browsers, but my sense is that generally most email clients will correctly display it, others may use the fallback font, and some hacks are available for others (like the usual Outlook).

https://litmus.com/blog/typography-tips-for-email-designers

What I fail to understand: if I have a custom font, can I use it as a web-font right away, being our own font provider? Or is there any conversion needed, or some configuration of some sorts? Is it possible at all? The only webfont provider I know is Google fonts.

transient_loop
  • 5,984
  • 15
  • 58
  • 117
  • The problem with custom fonts is that not all browsers accept every font format. So yes, you may have to convert to different formats. – Oriol Jul 09 '15 at 15:08
  • after some more research, and finding this question http://stackoverflow.com/questions/11729926/can-a-purchased-open-type-font-be-used-as-a-web-font and its embedded link in the response, it looks like I just need to provide the font somewhere accessible, reference it via CSS `url(mysuperfont.tty)`, and that's it! Can this be confirmed? – transient_loop Jul 09 '15 at 15:08
  • @Oriol yes I know, I will leave the decision to the client if he wants to risk that some email clients won't have the font – transient_loop Jul 09 '15 at 15:09

1 Answers1

0

To use a custom web-font, you will need to convert it (https://www.web-font-generator.com/ for example); Unzip it in your css file, then add those line to your css file (or your html file with ), it should work:

@font-face {
font-family: 'proxima_nova_rgbold';
src: url('../fonts/proximanova-bold-webfont.eot');
src: url('../fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/proximanova-bold-webfont.woff2') format('woff2'),
     url('../fonts/proximanova-bold-webfont.woff') format('woff'),
     url('../fonts/proximanova-bold-webfont.ttf') format('truetype'),
     url('../fonts/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
font-weight: normal;
font-style: normal;

}

Fakebounce
  • 667
  • 4
  • 17