I'm trying to create a responsive email template for Outlook 2013, everything works well except the fonts. I'm using fonts from Google fonts, and I'm loading them like this:
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
I'm not sure if it fails since Outlook 2013 can't load media queries on my internal CSS level, or if its unable to load fonts from Google Fonts.
Any thoughts?
Outlook doesn't support web fonts. So you need a fallback font for Outlook like an Arial or Times New Romans things.
<!--[if mso]>
<style type="text/css">
body, table, th, td {font-family: Arial !important;}
</style>
<![endif]-->
Related
So i'm using the Roboto font using this
and obviously font-family: Roboto in my css.
The problem is that only chrome displays the Roboto font. What should I do?
here's my website so you can see: click
I try it On Firefox 56 and the font in loaded
try to load font before another css file may be the problem solved
Like This
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
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.
one of my client website uses font called Roboto. When I look on their pages all looks fine and font is working properly on all of them.
However they say that their products pages http://lichtblick-led.de/index.php/produkte.html showing other font instead of Roboto. Again, they say its only on that page and not on other pages.
Can any of you replicate the same problem?
P.S. They said they tested it from all browsers, few different computers, and even cleared the cache.
Cheers!
after an inspection of the page I noticed that it's not using the Roboto font
<link href="//fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
that is font Lora.
this needs to be changed
under HTML:
<link href='http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
OR
under CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
You can further modify your selection over here on GoogleFonts
PS: I have included the latin & cyrillic subsets.
The link to load the Roboto font from the Goolge CDN isn't present on the products page:
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,300italic&subset=latin-ext" rel="stylesheet" type="text/css">
Also you should load the fonts before the JavaScript to prevent FOUC.
I'm using this to link to some Google Fonts:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
I'm using this code, which works in some browsers:
<span style="font-size: 110px;font-family:montez;"><b>Abcdefg</b></span>
Why doesn't the font doesn't appear in IE8? http://jsfiddle.net/3NbE5/
It seems that IE doesn't support multiple fonts in the href:
http://jsfiddle.net/3NbE5/3/
You had this href:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Snippet|Sarina|Crushed|Caesar+Dressing|Montez|Bad+Script|Sofia|Fontdiner+Swanky|Just+Me+Again+Down+Here|Voltaire|Geo|Coming+Soon|Wellfleet|Passion+One|Rock+Salt|Homemade+Apple|Meddon|Rosario' rel='stylesheet' type='text/css'>
After removing the other fonts it worked:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|Montez' rel='stylesheet' type='text/css'>
Just in case the solution above don't cut it for you.
I got multiple fonts working on ie8 without any problems. My actual problem was using ie11 in compatibility mode for ie8, where google web fonts don't seem to work in any possible way.
I guess the lesson is, use a vm with the actual ie8. You can grab one here or here.
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