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.
First and foremost, web fonts are currently supported in these email clients:
AOL Mail
Native Android mail app (not Gmail app)
Apple Mail
iOS Mail
Outlook 2000
Outlook.com
(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.
Related
I'm designing an email template, but my custom fonts will not effect any text. specially in Persian/Farsi fonts.
so how can I add some custom fonts to my email template?
The only difference to add custom fonts to email templates is that, by default, The Outlooks on Windows will ignore your font stack and fall back to Times New Roman. To prevent this, you can add the mso-generic-font-family:swiss; in your #font-face declaration. (I wrote an article about this property here.) But if you want to add a Google Font, my favorite way to embed it in an HTML email is to use a conditional comment to wrap the <link> element and hide it from The Outlooks on Windows.
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght#0,300;0,400;0,700;1,300&display=swap" rel="stylesheet" />
<!--<![endif]-->
However, even with this, you must know that #font-face support in HTML emails is quite limited. As of june 2021, it works well in Apple Mail (iOS, macOS), Outlook (macOS only), Thunderbird and a very few other clients. It doesn't work in any client from Gmail, Outlook.com or Yahoo. Make sure to check Can I email… #font-face for more details.
In google docs, for Montserrat font they have the word January looking like this (which is the same as the design I want):
In my code, I use the same format but what I see is a totally different font in my browser. This is my code:
<div class="event-date">January</div>
.event-date {
font-size: 16px;
font-family: "Montserrat", sans-serif;
}
And this is what I see in the browser (totally different than google fonts):
Is there a way to fix it to look like google fonts?
You must first link the font (ideally in the head tag), because this font is not part of the operating system. When the web browser can't find the font, it uses default font for the operating system.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
Or you can also import it in your CSS file.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap');
Check the Google Fonts CSS API documentation for more info: https://developers.google.com/fonts/docs/css2
I'm creating personal blog with next.js.
Currently i use google fonts to provide fonts for my blog. Everything works fine except initial content shift on load.
When I load my web it will shift when new font loads (not all fonts have same spacing, sizes, etc...). So my question is how to prevent this content shift?
I have seen many suggestions to add loading screen until everything loads, but I think that the best solution would be just to bundle everything to the html itself. NextJs automatically inlines styles for me with <style/> tags and next-images will inline small images with base64. So how do I automatically inline my fonts (I dont want to always change tons of #font-face declaration when I decide to change font)?
Currently i use:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
I would like NextJS to automatically convert it to something like this:
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
You can use this amazing project to get any google font with base64 inlined src.
embedded-google-fonts
just put your google font link here: https://amio.github.io/embedded-google-fonts/
for example, for Barlow font: https://fonts.googleapis.com/css2?family=Barlow:wght#400;600;800&display=swap
then you can copy the result and create a <your-font>.css file in the project.
I using NodeJS, with nodemailer, email-templates and ejs to send an invitation to my wedding guests.
I've managed most issues, but I can't seem to manage a custom font and there is a lot all over the web about it...
I think that this one is the most elaborate article that I've seen :
So I've added this in the head tag :
<link href='https://fonts.googleapis.com/css?family=Tillana' rel='stylesheet' type='text/css'>
but this still doesn't display in the correct font in gmail, nor outlook (haven't tested yahoo and others)...
<td align="center" valign="top" style="padding: 0; font-family: Tillana, Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
<p style="font-size: 14px; line-height: 20px;">
Some text hopefully in Tillana
</p>
</td>
I've seen in email-templates documentation that you can use an image rendering of the font with custom-fonts-in-emails, but it seems to be a bit of an overkill...
Any suggestions on how to proceed to cover most cases ?
Google Fonts Do Not Work With Gmail Or Outlook
Webfonts do not work in all email clients. They do not work with Gmail, Yahoo, Android clients and spotty support for Outlook 2007-2016. I know this sounds ridiculous, since Google has Google Fonts, but the current reality is that Gmail does not support Google Fonts.
You need to settle on a fallback font which is not Tillana or Open Sans, which is also a Google Font. In your case, the backup font for Gmail will be Arial.
Fonts supported by Gmail
https://jsfiddle.net/wallyglenn/g35nchmL/
These links will give you a better understanding of web fonts and how to use them in email.
https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/
https://www.campaignmonitor.com/css/text-fonts/font-face/
https://www.cssfontstack.com
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Outlook Custom Fonts
Microsoft Outlook is frustrating. Outlook 2007-2016 will work sometimes with Google Fonts. It has a problem with web-safe fonts as well. If the font has a space in the name, it will revert to it's default font, Times-New Roman, which is frustrating because that font has a space in the name!
To make sure Outlook does not default to Times, add this just below your <style></style> block:
<!--[if (gte mso 9)|(IE)]><style type="text/css">
body, table, td, a, p {font-family: Arial, sans-serif !important; font-size: 12px; font-weight: 300;}
</style><![endif]-->
Add more html elements as needed to the list of body, table, td, etc. You can customize as you would with any other style sheet. Outlook should use your style sheet, but if it doesn't this usually forces it to work.
Good luck.
Is there an easy way to display webpages in computer modern font?
The easiest and most stable way to do this I found was to base64 a font I found at http://mirrors.concertpass.com/tex-archive/fonts/cm-unicode/fonts/otf/. I used the cmunrm.otf from there, base64'ed it and put it as a font face in my css.
#font-face {
font-family: "my-font";
src: url(data:font/truetype;charset=utf-8;base64,T1R...gP5w/kP+RAA format("opentype");
}
body {
font-family: "my-font";
}
You can see an example at https://jsfiddle.net/jtvx9auo/
While you could also simply download the otf file and put it to your server, I found base64ing to be more reliable, e.g. when trying to convert to pdf using wkhtmltopdf.
In case anyone still stumbles upon this (2020+) looking for the optimised web fonts rather than the larger .otf fonts which are used in the answer above, I've hosted the Computer Modern font family via the jsDelivr CDN.
To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:
https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css
And then just add the Computer Modern Serif or sans-serif families directly in your css files.
Example Code:
<head>
<!-- Other imports... -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css">
<style>
body {
font-family: "Computer Modern Serif", serif;
}
</style>
</head>
Check out the full documentation here