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.
Related
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.
I was really excited when I finally got my custom fonts working in a custom Mailchimp template.
I added the following to the head of the template:
<link rel="stylesheet" type="text/css" href="http://eberhardtsmith.com/d/wp-content/themes/blankslate/font-face/fonts.css">
That worked, until I use the template in a campaign, and everywhere shows the fallback font (Safari, Firefox, Mailbox for iPhone, Gmail tested).
Seems like the HTML isn't rendering the in the head of the template when it's in use. Anyone have any experience getting mailchimp to work?
You might need to choose a mail-safe font. Check out this blog post.
Emails are quite limited in what you can do in terms of styling.
Thanks to reccomendation from #j08691, I was able to get the fonts working using inline styles and not <link>.
However, the fonts only display on e-mail clients which support #font-face.
Otherwise, it uses fallback font.
If I attempt to send the following html email from Outlook 2007 the hyperlink shows when I receive it in gmail. However, sending it from an online test service the hyperlink does not show. If I reply from gmail to the outlook 2007 client, outlook shows the email without the hyperlink, as intended.
It seems to me that on the outgoing email outlook is attaching its own stylesheet that is overriding this. Is there any way to add to my code to stop this? I've tried the important! trick to no avail.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div>
<a style="text-decoration:none;" href="www.example.com"><font color="#e4480d"><span style='text-decoration:none;text-underline:none'>www.example.com</span></font></a>
</div>
</body>
</html>
Outlook processes your HTML before sending it out, so it does alter your code pretty heavily in fact. If you do inspect element in Chrome on the the email in GMail you should see that there are all sorts of new tags with classes like "MsoNormal". They also probably throw another <a> tag in there too.
You'll notice that when you receive a plain text link in Outlook it does that same blue hyperlink. It's the same thing, it's just putting the <a> around your link inside your span and font tags and overriding them.
My (partial) solution would be to see if there's a class on the <a> and do the text-decoration:none in the style tag on that class. Since GMail doesn't support <style> or linked stylesheets, I think you're out of luck if you want to customize your link colors and still send from Outlook :(
There's always the option of not sending from Outlook though! You could use your domain's IMAP settings and use GMail's interface to send and receive mail. See below:
https://support.google.com/mail/troubleshooter/1668960?hl=en#ts=1665018,1665137,2769074
Outlook uses Word for rendering HTML markup. You can read more about that in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Hope that you will find the answer there.
<html>
<head>
<title> </title>
<body>
<font face="file:///E:/softwares/FONTS/alpha kufi regular.ttf" size="+2"> This is a tester for a font, that may not be installed on the machine </font>
</body>
</head>
</html>
This snippet doesn't show up the sentence in the intended font. What could be the reason for this ?
Note: I am aware that the font tag is not supported by HTML 5 and deprecated by HTML 4.
There are two basic problems here: the HTML face attribute (as well as its CSS counterpart, the font-family property) needs a font family name as value, not a URL of a font file, and a file: URL is inherently system-dependent and may fail to work in many circumstances.
The following works, provided that the font file alpha_kufi_regular.ttf (better avoid spaces in font names, as spaces as such are disallowed in URLs) is placed in the fonts subdirectory of the directoty where you have the CSS file and the browser supports TrueType fonts as “web fonts” (this need not be “web font” usage but could be local; the techniques are the same):
<style>
#font-face {
font-family: AlphaKufi;
src: url('fonts/alpha_kufi_regular.ttf');
}
</style>
<font face="AlphaKufi" size="+2"> This is a tester for a font,
that may not be installed on the machine </font>
Since not all browsers support TrueType fonts as “web fonts”, consider using FontSquirrel #font-face generator if you intend to use the font on a web page.
It is usually better to use CSS rather than HTML for font settings, but that’s a different issue. In theory, “web fonts” need not work with HTML <font face="..."> too (no specification requires that), but in practice they do.
I can't find a reference for it, but my best guess is that you can't access fonts using the file:// protocol (local filesystem). This is certainly true if the page is online or accessed through a local server (http://localhost or equivalent).
Also, there's no reason at all to ever use <font>. It might not work just because browsers don't support it fully anymore.
edit: in fact, I'm not sure <font> has ever supported using a font file instead of a font's name.
The solution for providing a font file is to use CSS's #font-face.
It's because font's face attribute does not take a path to a font file. It takes a comma separated list of font names. The browser searches the system for installed fonts and loads the relevant one from there (if it exists).
If you want to specify your own, you will probably need to use CSS #font-face.
Using Google Web Fonts API to add web fonts to your pages :
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=alpha kufi regular">
<style>
body {
font-family: 'alpha kufi regular';
font-size: 48px;
}
</style>
<title> </title>
<body>
<div>This is a tester for a font, that may not be installed on the machine</div>
</body>
</head>
</html>
~ Reference
I am currently trying to write a newsletter for the company I work for. The newsletter appears correctly in all major internet browsers (IE 5.55 to 9, Chrome, Firefox, Opera), but when anyone opens it in Outlook 2007 or 2010, all the fonts look "blown up".
I am aware this issue is because of Outlook's way of rendering HTML like Word would, and if I manually "shrink" the fonts, they look good in Outlook but not in any other email software.
My question is this. Is there a way to detect whether or not an email is being opened in Outlook, or even Word? Given that Outlook doesn't allow JavaScript, this solution would have to be in plain HTML. My plan would be to detect the email browser and change the font dynamically (a sort of if-else).
Thank you for your help!
Conditional Comments
It might be possible to achieve this using conditional comments.
<!--[if mso ]> ...<![endif]--> <!-- Outlook -->
<!--[if gte mso 12]>...<![endif]--> <!-- Outlook 2007+ -->
<!--[if gte mso 14]>...<![endif]--> <!-- Outlook 2010+ -->
<!--[if gte mso 15]>...<![endif]--> <!-- Outlook 2013+ -->
<!--[if !mso ]> ...<![endif]--> <!-- Not Outlook -->
Since Outlook supports style tags in the head or body, something like the following could be done:
<!--[if gte mso 12]>
<style type="text/css">
.myClass {
/* Special styling for Outlook 2007 and later */
}
</style>
<![endif]-->
The use of conditional comments in Outlook 2007/2010/2013 tested fine on Litmus.
With previous versions of Outlook (2003 and bellow) you could use the IE CSS hacks, now you can't.
And related to your question, you can't detect if it's being viewed with Outlook and even if you did, and as I said, you can't really have conditional styles :(
My suggestion is to style the text with pixels (I bet you're using points, right?). I'm saying this because I've done several html emails destined to various email clients, and the font-size is the same (more or less, but at least not very different) between different email clients.
The only thing that won't be possible to style is shrinking/reducing line-height. Outlook doesn't allow that. Also the style should to be set inline.
The common pratice used in the past was to add an image in the html. You can add to them a param to keep track of the emails.
<img src="image.php?email=123">
Of course these day almost every email clients block further requests.