I am putting together an email template which includes the Montserrat font; however, it seems to render just about everywhere without issue except for gmail via a browser (Firefox/Chrome)!
The font renders as it should in my previews, iPad (mail), and Android (gmail). Has anyone come across this issue or is able to confirm that this font is disallowed via the web client to Gmail?
I have tried both the font-family (as per the Google Font's site instructions) and import methods of including the font with similar results as mentioned above.
Thank you in advance!
Gmail does not work with web fonts like Google fonts. Lack of web font support is an issue with desktop Outlook 2007-2019 as well.
You will need to choose a web safe font as a backup. I created a list of supported fonts:
https://jsfiddle.net/wallyglenn/s94weLqj/
Good luck.
Stackoverflow wants posted code before I could post the link
of fonts that work in Gmail I maintain on JSFiddle.
I felt a list of fonts might be useful in choosing a fallback font.
font-face property will not work in web gmail.. use font-family instead. you can visit below link to check which css property works in mail for email template. hope this helps . thanks
https://www.campaignmonitor.com/css
Related
I'm using this font: Google Font - Faster One
but it doesn't display correctly in Chrome (v59)
while on Firefox (and Safari), it shows correctly as on Google Fonts website
What I also don't understand is that it still displays correctly on Google Fonts website using Chrome but not on my website.
P.S. I'm aware that many similar questions have been asked before. But I still cannot find any clear solution for my case
The solution is to use the correct font weight. Faster One font on Google Fonts only has regular (400) weight (previously, in my CSS, I use 600)
I mean this font collection: https://www.google.com/fonts
I want to use some maybe non standart fonts on my page. If I use Google Web Fonts on my site, will fonts be displayed properly? Or fonts from user's browser will be displayed? Or nothing will be displayed? Thank you.
caniuse # fontface – yes, you can, all modern browsers supports fontface.
The font you load will be used on all clients as long as the file from Google is available and the client understands this technology. Therefore you should not load too many fonts, because it dramatically slows down the page loading, as font files are pretty large.
Since you can specify multiple fonts in css, if the file is not available the second specification will be used. This should be something like "Arial", which is mainly available. The third specification can be something generic like "sans-serif". This assures that at least any font you want is used.
Nevertheless, the client will use any font if nothing appropriate was found. It will never silently display no text, just because your CSS does not specify something usable.
yes it will displayed properly and perfectly on web
so no need to worry, use it freely
I am using two Google Web Fonts at my website. They are Roboto Slab and Fauna One. They look good in latest Mozilla Firefox and IE10 but for some reason they look horrible in Google Chrome.
They are linked to my website as follows:
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
It took me a while to realize that Google Chrome has a problem with web fonts and that it renders them poorly. I am wondering if there is solution for this?
What if I download those two font types and embed them into the main directory of my website and then call them through CSS via #font-face property? Would Google Chrome in that case render those fonts nicely or I would still have the same problem and poorly rendered fonts???
Or there is some other solution for this issue?
Thank you all!
I believe I saw some bug report for Chrome where it was mentioned that this will be fixed - but I'm not 100% sure. I believe that it's not actually 100% the fault of Chrome...
My understanding is that the problem is to do with the order in which font types are presented in the #font-face directive. So, Chrome handles more than one type but not all types will render at equal quality. Apparently, Google actually doesn't serve the fonts in the right order from fonts.google.com - somehow...
In the end I found that, with Roboto at least (which I'm also using on a project), it is available for use on Font Squirrel (and open sourced under the Apache 2.0 license) - so you can download it here: http://www.fontsquirrel.com/fonts/roboto (download the Webfont Kit for full cross-browser font support) - you lose the CDN goodness of having it hosted on Google's servers if you use it from your own web server but, IMHO, I'd rather lose a few milliseconds than have to deal with such terribly rendered text...
I can't help you with Fauna One, unfortunately - it doesn't appear to be listed on Font Squirrel - perhaps you can find it on another font site? Or another similar font which is available on font squirrel?
From a web browser perspective (Chrome being the browser in question), Chrome 35 in Windows has difficulty rendering some fonts, like Roboto, without some horrible artifacts that make the font difficult to read.
There is a feature called DirectWrite that will be included by default in future versions of Chrome that will fix this problem. You can enable it now in Chrome 35 by going to chrome://flags in your browser URL bar. You can Enable DirectWrite (experimental in Chrome 35), close your browser, open and try again.
Just to be clear, I discovered this problem on Chrome 35 for Windows. DirectWrite is a DirectX API for rendering fonts in Windows. Chrome by default uses Windows Graphics Device Interface (GDI) which seems to be the problem.
See this article
I am having an issue with customizing a WordPress template.
When I try to apply a Google Web font to a phone number in the header (as in dev [dot] beyondbbd [dot] com), Google fonts don't seem to be applied to the phone number (or all across the site for that matter) in IE9.
Any ideas about this? Is there an easy fix that I'm missing?
Thanks in advance.
-Nick
Try rearranging your css files so that the Google stylesheet comes before your own stylesheet which calls the fonts.
I use some fonts in my new website that do not exist by default on normal user computers.
After some search I got that there are some tools that might help, like Google web-fonts.
Fonts that I used are : Bebas , Sansation and Quicksand
But I couldn't find them on Google web fonts.
How do I do use these fonts ?
And what are other cross browser solutions?
Different fonts are created by different font foundries. Not all fonts will be found in the same place. And not all fonts are available to be used as web fonts because of font-licensing.
Fonts are not always free and good fonts are rarely free.
You can usually find out if a font is available as a web font, and who owns the font by googling the font name plus "#font-face".
You absolutely should know where you'll be getting the fonts you'll be working with in advance. If you have three fonts that come from three different font-services then that's bad. Firefox especially wont like it much and you'll have some pretty bad fout problems.
Fortunately for you, all those fonts are available through font-squirrel
Bebas
http://www.fontsquirrel.com/fontfacedemo/Bebas
Sansation
http://www.fontsquirrel.com/fonts/Sansation
Quicksand
http://www.fontsquirrel.com/fonts/Quicksand
What you will want to do is download all those fonts, them run them through the #font-face generator
http://www.fontsquirrel.com/fontface/generator
HOWEVER It reads to me like you don't really understand what #font-face is, or how it works. So I'd recommend reading up on it some more.
I am not sure what exactly you mean, but if you want to convert your website's font into a custom font which is viewable for the visitor, you could try use the curfon solution.