Recently after upgrading my Google Chrome browser to Version 32.0.1700.76 m I noticed that bold fonts have a blur/drop shadow effect on my sites using #font-face.
Here is an example site with bold text.
Here is an example site with bold headers.
Before updating my Chrome these sites were displaying font correctly, I have tested fonts in the following browsers and they are still displaying correctly:
Firefox 26.0
IE11
Opera 12.11
Safari 5.1.7
Is there any way to stop this blur effect other than downgrading Google Chrome?
EDIT
I sent a error report to Google about this issue and it seems like they have reverted the "blurry" effect on fonts. To avoid this issue go with Jukka K. Korpela's solution.
In the examples, you have declared only normal (regular) typefaces for Gotham and Sansation in #font-face rules, yet try to use bold face. This makes browsers apply algorithmic (synthetic) bolding, with varying results.
The solution is to get bold typefaces and declare them, in #font-face rules that have font-weight: bold.
I had the same issue. The question was asked almost 5 years back, but the problem still persists. I am using Chrome 69.
In my project when google font is used I got blurry text.
I use the google font via below code :
https://fonts.googleapis.com/css?family=Roboto:400,600,800'
rel='stylesheet' type='text/css'>
And the most important part in font-weight properties I always use
font-weight: bold
Solution: Now if you use 400,600,800 as normal, semi-bold and bold, of course then replace it with
https://fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold'
rel='stylesheet' type='text/css'>
Note: I am sharing a solution which solved my issue. It may not apply to your situation.
Related
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
Does anyone know about the current situation with Google Fonts rendering in Chrome? I've read through tonnes of posts and outdated solutions that no longer work, and it seems that the latest best solution is to use Font Squirrel to get the Google Font and then link the SVG format first so that Chrome uses it. But apparently SVG font rendering is glitchy/inconsistent/unreliable in other ways. Is there a good alternative?
Currently the only fix seems to be reordering SVG in the #font-face CSS code, which you mentioned. The 'glitching' you're referring to seems to be fixable by using a media query trick outlined in the following post. https://stackoverflow.com/a/14345363/1490006
When you use google fonts, use property font-weight in your CSS. I had this problem with font rendering on my chrome browser. After I have setup this property problem has gone.
So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using #font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
Depends on what OS are you using since #font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific filter: property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.
There is also webkit specific -webkit-font-smoothing which works ok and might help you with chrome and css3 font-smooth (never used this one so can't tell you about results or supported browsers).
Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for #font-face there is no solid solution to get it look the same on all browsers and systems.
I'm using Google Font API to display my website logo. (See top of stolencamerafinder.com)
In Chrome the letters 'f' and 'i' appear seperately, but in FireFox, they are a nice joined ligature
How do I force Chrome to use the ligature?
If I use the ligature ascii character (fi) in the html then it doesn't use the font, it falls back to arial, yet the font (OFL Sorts Mill Goudy TT) must support that ligature since firefox displays it.
Update: I ended up ditching Google font API in favour of plain #font-face. More choice on fontsquirrel.com anyway.
Short answer: This feature isn't implemented yet.
Long answer: Take a look at http://crbug.com/22240 ( http://crbug.com/64479 might also be interesting).
Is it possible that in webkit browsers this property wasn't yet devoloped?
Or is it a problem of the type of font used by webkit browsers? (TrueType, Woff instead of Opentype)?
EDIT: In Safari this works with some fonts that support ligatures.
For example it works with the default browser font (Times on Mac Os X), while it doesn't work with a couple of Google fonts I was trying with #font-face CSS feature.