Menu
I am working an HTML mailers (HTML Email) and the design I received contains custom fonts. How can I use custom fonts in my HTML email?
Thanks in advance.
461
First and foremost, web fonts are currently supported in these email clients:
(Eg. so there's no way to display a custom web font in Gmail web, Yahoo, or newer versions of Windows Outlook)
Step 1: If the font is already hosted on a service like Google Fonts, it can be referenced from there in the HTML's <head> section like so:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
Alternatively you can use the @import method.
<style>
@media screen {
@import url('https://fonts.googleapis.com/css?family=Roboto');
}
</style>
Outlook doesn't support web fonts and would choke on this reference, so wrapping it in a @media tag will make Outlook ignore this all together.
If the font is already not available online but you have the font file, it can be converted to a web font using a tool like font squirrel. The resulting files can be uploaded to a server and referenced like so:
@media screen {
@font-face {
font-family: {font-name};
src: url({http://www.website.com/font-url}) format('woff'),
url({http://www.website.com/font-url}) format('truetype');
font-weight: normal;
font-style: normal;
}
}
Note: For a deep dive on how to reference web fonts in email, check out this article by Litmus.
Step 2: From there, referencing the web font in the font stack will display it in email clients that support web fonts.
font-family: 'Roboto', 'fallback font 1', 'fallback font 2', sans-serif;
Email clients that do no support web fonts (such as Gmail web, Yahoo, or newer versions of Windows Outlook) will skip over the custom font and attempt to display the fallback fonts listed in the font stack.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
