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.
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.
I am developing a landing page for a website at:
https://emotional-wellbeing.com/
The page renders fine in Chrome, but in Firefox the Open Sans Condensed fonts do not show at all. I have tried several changes from this forum, but none have helped.
Google fonts include:
<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:700" as="style" onload="this.rel='stylesheet'"/>
The page is Open Sans font, except for:
<div class="sectionmainheadline"><h1 style="font-family: 'Open Sans Condensed', sans-serif; font-weight:700; font-stretch: condensed;">"Discover How You Can <span style='color: #3a9921;'>Melt Away</span> Away Your Stress & <span style='color: #3a9921;'>Overcome </span>Your Anxiety,<br/><span class='underline'>In As Little As 5 Minutes From Now</span>"</h1></div>
I am using Bootstrap 4.
You can see how it looks on Chrome here:
But on Firefox the red circled area does not look Open Sans Italic, and the blue circled area is god knows what font!:
How can I get these circled areas looking like Chrome versions? I am out of ideas.
Looks like this
<link rel="preload" […] as="style" onload="this.rel='stylesheet'"/>
does not work as intended in FF to begin with. As soon as I change the rel to stylesheet manually in inspector, the mentioned parts show up in the desired font fine.
Since I am not even seeing a request for the stylesheet URL before that, I would assume that it is not the onload part that is going wrong here, but that FF does not want to preload stylesheets this way in general yet(?).
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.
The html+css for Firefox in windows, looks fine, but same looks out of place in Firefox in Ubuntu. Please do let me know, as to how it can corrected, what should i do?
More info 1: The css code for the text in the attached image:
style="font-family:'Museo 300';
font-size:11px;
text-align:left;
color:#636466;
padding-top:3px;"
Although am changing Museo 300 to font to Arial, Helvetica, sans-serif, so it can load in any browser with these default fonts, but still i see the this problem.
image attached
Most likely the font you are using is not installed on the Ubuntu machine. To get around this you must supply the font yourself. Google Fonts is a great way to do just this.
You can search their site for a suitable font, and then link it in your site <head>.
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
And then use it in your CSS
font-family: 'Roboto', sans-serif;
Sadly, Google Fonts does not have the Museo font you are trying to use. However, you can use the #font-face CSS At-Rule to link to a font file which you are hosting on your site. Make sure that you only host the languages and font weight/style that you plan to use, and that your font file is limited to those same parameters. This will allow the file to be loaded much faster.
#font-face {
font-family: 'My Custom Font';
src: url('http://yoursite.com/yourfontfile.ttf') format('truetype');
}
p.customfont {
font-family: 'My Custom Font', Verdana, Tahoma;
}
(See this answer for more information)
Font looks different in different browsers. How to fix?
Font in FireFox,
Font in IE
I don't see any difference. I tried having a separate style sheet
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/fontsie.css">
<![endif]-->
.
I also linked <link rel="stylesheet" type="text/css" href="fonts.googleapis.com/css?family=sans-serif">;.
Here is my code http://jsfiddle.net/priyaa2002/FfFwe/5
Well, obviously they're not the same font. Most likely, you're using a font that's available in Firefox but not available in IE. Can you give us any hints, like what the HTML is like?
Also, check what the default font settings are in both browsers. The Firefox one looks like a special font (taller and lighter than, say, Times Roman) and the other font is a barely serifed font (sort of sans serif with some swashes) like Ultima.
Update
Okay, I've got it. Your font-family is
font-family:Verdana, Geneva, sans-serif;
Your IE doesn't have either Verdana or Geneva (I think your firefox is getting Geneva) and so defaulting to sans-serif. If you really want them to all look the same, consider going to link Google fonts so your page will load fonts for you from Google's network.
I just fiddled that to
font-family:Verdana, Geneva, Times, sans-serif;
and it looks better.
Fonts will always render slightly different in different browsers, there isn't any way of getting around that unless you use images or a javascript solution. One popular solution is typeface.js.
I'd recommend reading up on typeface and doing some research into other solutions and try one.
Link to typeface.js:
http://typeface.neocracy.org/
Good luck!
Matti