I'm using google web fonts for a project, and have had no issues so far. I have a text shadow applied to some areas, and was pretty happy with the result in Chrome. I switched over to FF and the text was dizzyingly blurry. This applied to all text, shadow or not.
Is this a google web font issue, or something else?
Here's a screenshot of chrome
...and FF
I'm also having many issues with this at the moment...
You can try adding font-weight:normal; or font-weight:100; to your CSS, but I have found this work only sometimes.
My fonts all work correctly on FF (even IE) on PC, but using FF on MacOSX (Snow Leopard) they give that bold/blurry effect :(
Try toggling the hardware acceleration in options/preferences > advanced.
Read somewhere that rendering of fonts changed with increasing usage of hardware acceleration.
Also you can try tweaking at OS level. Go to system preferences > Appearances > Font-smoothing and tweak options there. Many people find blurry font issues because of mac's font-smoothing technique.
Related
this problem occurs after chrome update (ver52). As I learnt, DirectWrite was removed on chrome://flags, therefore I didn't do anything to solve the problem.
Especially small sized fonts are render blurry and jagged. When I design a web page fonts really bother me.
I tried a lot of CSS tricks but no one solved the problem. (text-shadow, font-smoothing, transform3d, filter, zoom, scale and so on)
Also I read that installed Helvetica font causes this problem, but I use win 7 and there isn't installed Helvetica font on my computer.
I installed Chrome Canary; there is still problem on webpages.
So, has anybody got an idea to solve this problem.
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
OS: Win 7 64bit
Browser: FF 24.0
If I go to http://www.google.com/fonts it looks awful:
And when I load one for my site locally it looks equally as bad but here is my configuration that I generated from fontsquirrel below:
#font-face {
font-family: 'SecretSans';
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot');
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot?#iefix') format('embedded-opentype'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.svg#secretsansttextralight') format('svg'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.woff') format('woff'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
Because it looks just as bad on the site above and my own site I presume it's an issue with Firefox and/or Windows.
Is there a fix/configuration that will work for all users hitting my site that doesn't require them changing any settings within Firefox or Windows as that's obviously unrealistic.
EDIT1: I just went to Control Panel > Fonts > Adjust ClearType text and now it renders properly in Firefox... I can't ask users to do this though so I'm hoping there is another way
I know this thread is from the stoneage, but unfortunately the problem is still current. And if you google for the choppy fonts problem, it's in the top 10; so I want to add my 10 Cents of experience with it!
Ok: If you search Google for problem with fonts under Vista/Win 7/Win 8, you find two major groups of problems that are both related to ClearType in many cases. Not all! But many.
Group 1: Blurry Windows fonts
If we talk of "Windows fonts" we are talking of the user interface (menus and such), and the "workspace" of office apps like Word or Excel.
This problem hits almost all people that do not have a 16:9 widescreen monitor that is HD capable, esp. classic office-type monitors of 19" and 1280x1024 resolution. The keyword is "Low-DPI" here.
For those who don't know: ClearType does a HORRIBLE job on these Low-DPI monitors and renders the whole interface in such a blurry way that trying to work with it causes massive eye strain and headache. Really folks, it gives you eye cancer!
(and no, you can not recreate that prob' on a Full-HD monitor!)
The only way out is to disable ClearType. This helped almost everybody of group 1 - including me.
Group 2: Choppy font rendering in Firefox and Chrome (rarely MSIE)
In many, many cases - like in this thread - ClearType was disabled. And when re-enabled, the browsers do render fonts just fine. True for me, too!
Unfortunately... when I re-enable ClearType, I'm back in group 1!!!
So: EITHER I have ClearType disabled and can work with a sharp and clear Windows for hours without fatigue of my eyes - but then I have to live with choppy webfonts in FF and Chrome.
OR I re-enable ClearType to see the nice and nifty fonts the designers have chosen for their oh-so-stylish websites - and live with the headache Windows gives me due to the blurry fonts! :-(
Obviously, I'm going the first way.
And if I stumble about a website where fonts look like broken, I simply toggle the usage of webfonts with just one mouse click - there's a great FF-AddOn for that.
Oh, I forgot: Why seems MSIE to render the fonts nicely?
Well, IE (at least 10 and 11 to my knowledge) always uses ClearType to render a page - no matter if disabled in the system settings or not.
Of course, it then also shows the blurry fonts problem - and makes me remember why I have ClearType disabled. And will let it so!
Final thoughts:
Programmers believe webfonts to be the final solution to all of their design-needs, thinking, they have everything under control by testing their stuff on a couple of default systems. In fact, webfonts just made a well-known problem freak out of any control - because there is no such thing like a default user!
Think about it.
I am pretty sure it is just how the browser renders it. Especially with #font-face stuff (I am assuming you used http://www.fontsquirrel.com/ or a similar site to generate it). You can use a little bit of text shadow to make it a little bit crisper, but from what you have shown, I think you might be better off trying to find another very similar font that will render better.
This was obviously because you had ClearType switched off. It's the method used to smooth the edges of fonts on computer screens (LCD). It has nothing to do with the method used in the webpage to attach them, this is strictly a font rendering issue. Fonts may appear differently depending on the system, as each has a slightly different method of rendering them - they tend to look best on Apple systems, while Windows seems to have a somehow inferior rendering method. This is entirely up to the system that is running, so the fonts will render differently for various users. Also, professional fonts from big foundries generally render much, much better than free, open fonts, because they're specifically corrected to optimize how they're rendered on screen, especially when they're rendered small (below 20px size), so the roughness of fonts from the Google Fonts set might also in part be due to the fact they're not as carefully crafted as those professional, expensive ones. Nevertheless, regardless of the font quality, text will always look uglier and choppy if font smoothing is switched off (or not supported), so there is nothing you can do. Stopping yourself from using custom webfonts because you're worried about the fraction of users who have font smoothing turned off is will stop you from using them at all.
I am working on a project where client wants to use MotivaSans-Bold.
However on windows browsers it displaces text on twitter bootstrap enabled buttons but looks good on Mac browsers. But if I try to change padding it disrupts Mac browsers.
What can be the problem? Is there any problem associated with webfonts?
EDIT
#font-face {font-family: 'MotivaSans-Bold';src: url('webfonts/279BB3_D_0.eot');src: url('webfonts/279BB3_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/279BB3_D_0.woff') format('woff'),url('webfonts/279BB3_D_0.ttf') format('truetype');}
The problem is most likely that the spacing on the webfont is going to vary from browser to browser. What's probably going on is that on Chrome on the Mac the font and button look good, but then Firefox on Windows 7 the fonts renders slightly larger and throws off your button.
You should be able to address this with padding/margin via CSS as long as you don't try to set any fixed widths.
If you post a link to the page it'll be easier to suggest a more specific answer, but if the webfonts look relatively similar both Mac and Pc than there's nothing 'wrong' as far as the font goes and it's really a CSS issue.
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.