Search code examples
htmlcssfontshtml-emailwebfonts

Can any font be used as web-font (specifically for HTML emails)


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.


Solution

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

    }