I have a problem to load the google web fonts on firefox
body, input, select, textarea, h1, h2, h3 {
font-family: "Ubuntu Condensed",sans-serif !important;
}
This is a known issue with Google Web Fonts. An internal configuration change broke serving of one of the headers needed for reliable operation in Firefox and IE9+. The fix is propagating now and it should be working soon.
Thanks for reporting the issue!
(I'm an engineer on the Google Web Fonts team, found this in a twitter search trying to investigate how deep the breakage went)
Related
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
Here's some example text from gmail under Google Chrome v37.0:
Here's the same message text from gmail under Opera v12.16:
MS core fonts are installed.
Here is Google Chrome's advanced font settings
I configured Gmail under the settings section, but that only defines default outbound font behavior and not what is shown from other users.
Is there a way to clean up the font issue under Chrome?
You might be seeing this Chrome bug which sounds similar:
https://code.google.com/p/chromium/issues/detail?id=374818
I recommend you star it (in the top left) to follow any developments and maybe comment if you have info to contribute.
According to the comments there it affect the latest Chrome 37 version in Linux, and this problem indeed appear in gmail.
You can try the workaround suggested there:
j.lasock...#intrallect.com:
For a bit of a tedious workaround, you can use stylebot to apply global stylesheets to chrome
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
and
twelve.e...#gmail.com:
Just to expand on #4 above, specifically for Gmail users, if you install stylebot and use the following rule, you'll have at least a workaround for Gmail (assuming you like OpenSans). I'm not sure if this bug is even tracked by the devs anymore, since it's still sitting in "unconfirmed" status.
URL: mail.google.com
css:
div {
font-family: OpenSans;
}
I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better).
Example can be found here: http://jsfiddle.net/PNYfR/
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin">
<p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px">
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897
</p>
I've read related questions, but any of them don't offer simple solutions for quick projects:
Google webfonts render choppy in Chrome on Windows
Well rendered webfont solution
Google webfonts and windows xp
To complicate a bit more, our designer is using Mac, which renders fonts correctly.
Questions:
Is there a list of google webfonts which render OK?
Or is there a quick step by step solution on how to get fonts render correctly?
And last, is there an alternative free webfont provider, which serves fonts OK?
I've found that downloading the fonts I want to use, converting them to .svg using font squirrel (web application, google it) and hosting them on the web server seems to solve the issue. In the code, place the .svg font link above the others and Chrome will/should grab that first.
These are the defaults for font smoothing (with google fonts too) I use that seem to do the trick. Hope this helps
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}
Known issue for years (first mentions from 2010). Developers promissed to introduce fix maybe this year. Problem (as I understand) is with enabling directwrite (for for font smoothing) within sandbox.
More here
http://www.reddit.com/r/web_design/comments/23cuif/yet_another_chrome_webfont_aliasing_post_why_is/cgvs5j2
or here: https://code.google.com/p/chromium/issues/detail?id=331115
Edit: Using SVG font can help for someone, but SVG is too blured for me (compared with antialiased woff in Firefox).
Specifying the font-weight to 400 fixed the issue completely for me. I think it is intially 700, at least for h2 and h1...
h2 {
font-family: 'Lobster', cursive;
font-size: 23px;
color:#fff;
font-weight: 400;
}
Firefox still wins, but it is not jagged anymore
Just go reset all flags in Chrome. Type in chrome://flags in the URL address bar and click on the Reset All Flags to default button. That should be on the right hand side of the settings page. It worked for me. If it does not for you, you may try enabling the Aero visual settings of your computer (only if disabled) then reset the flags. If resolved, you may then switch off the aero visuals.
To access the aero visual settings in Win7, go to My Computer properties > Advanced system settings > System Properties > Advanced tab > Performance (Settings). From there, toggle the current setting back to 'Adjust for best appearance (it should check all boxes under it). After resetting all flags and the fonts are back to normal, you may choose to toggle it back to Adjust for best performance. That essentially unchecks all visual options.
Thanks,
Dong
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 not sure what happened to my css font-family that I was using on my website. Until yesterday it was working on. Then this morning it stopped working on Chrome and then later on FireFox & Safari (Mac).
Weird thing is that it looks fine on one of my teammates computer (Linux) but also looks bad on a friend's Mac computer. No idea what happened. When I inspect the element I can see the CSS font-family attribute but it is crossed out, as if the font did not load.
This is how I have my fonts added on my CSS:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
This is how it looks now and how it should look.
Completely stuck, no idea what happened.
Remove the part |Helvetica+Neue:400,500,700.
Google Web Fonts do not contain Helvetica Neue. It is a commercial font, not available for free, and probably not available as a web font for a fee either.
When you have a font that does not exist at Google Web Fonts in your requests, the Google server responds with 403 Forbidden and does not send any font. You can see this if you use the developer tools (F12) and look at the Network section when loading your page.
When you split your request to three requests, one for each font family, the other requests are successful. But it is more efficient to do have the two font families in one request and drop Helvetica Neue (or replace it with some font that Google actually has).
Ok, got it to work. Not sure what happened. All I did is change the line:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);
to:
#import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700);
#import url(http://fonts.googleapis.com/css?family=Helvetica+Neue:400,500,700);
Helvetica Neue is in fact available at Google Fonts:
http://fonts.googleapis.com/css?family=Helvetica+Neue