I am currently using Josefin Slab from Google Web Fonts API and having some rendeding / spacing issues. I have tried everything to get the vertical alignment to match up from Firefox OSX to PC and cannot get them to render correctly. Does anyone have experience with this that can lend some insight, I would like to continue to use the fonts for the navigation but may have to move to images for cross browser consistency.
Does anyone have any pointers of similar issues they may have experienced and addressed?
This is not an answer but a possible workaround for you.
Webfont is tricky even Google can't get it right, it is mostly due to the fact each platform interpert the same font file differently. If you know scripting, you could detect OS, add className and adjust the style for each platform. Modernizr could do the same thing.
Related
I am using Chrome for a very long time now and I happy with it. Unfortunatly they discontinued the DirectWrite option. This is hell for people that aren't using Clear type fonts. Most fonts are messy now.
I want a Stylish sheet that replaces all website fonts with Arial. So I want every website to display the Arial font. I don't know how to do it.
Thanks! :-)
I am not sure whether you can do this through chrome settings, but I found a great extension FontChanger that does the trick
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.
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.
I'm curious which one would be better or more standard to use in websites. I'm leaning toward Google Web Fonts, but I'm apprehensive about needing an additional CSS file.
Well, I would use #font-face, simply because I had some bad experience with Google Fonts. Especially in IE, Google font just wont work correctly.
Also, I've used Google Fonts directly from their servers, so the load time could be a little longer.
I wold recommed you something like FontSquirrel because they have type formats for allmost all browsers in whenever I've used them, they just worked.
Cheers
Google web fonts API uses #font-face under the hood, so there isn't a real technical difference. Google just provide a wrapper around font-face which handles some cross browser differences and gives you some convenience functions, kind of like what jQuery does for JavaScript.
https://developers.google.com/webfonts/docs/technical_considerations
Sure, it is some extra resources for your project and that's a valid concern. And it's some extra complexity that you have to maintain, and anyone new to the project has to learn. But maybe the trade-off is worth it for your project.
I know I've had times spent converting fonts to various formats so #font-face would work for multiple browsers, and Google web fonts would get rid of this work for you.
I'm launching a new site soon and would like to use a nice font (for headings etc). I've experimented with scripts like cufon and found them very disappointing. The way I see it, I have two legal options:
Create my own font stacks using fonts that are licensed for #font-face (like fontsquirrel)
Subscribe to typekit
Use standard font stacks including some of MS Office's nicer fonts (not keen on!)
I'm looking for comments from someone with experience here, not speculation please (I can do that myself!).
Has anyone used typekit? Have you noticed any performance issues?
I used the typekit free trial, and loaded it using Google's webfont loader (which works with Typekit, Google fonts, and Ascender. I've never used Ascender, but found Typekit and Google fonts to be of about equal speed. This speed was not enough to deter me from using it. I have a very lightweight website, so one large item didn't impact it too much, but given what broadband penetration is and how much processing power it seems to use I wouldn't dissuade you from using this. These font files are all smaller than most small .swf files and people don't balk at using those.
Also, in regards to Safari on Mac, I've noticed no issue with Google fonts and I'm curious if the javascript that #rvlanen references is the javascript in the typekit font loader. Google's webfont loader doesn't seem to have this issue.
Hope this helps
P.S. Link to Google Webfont loader: http://code.google.com/apis/webfonts/docs/webfont_loader.html
If you're concerned about performance, you could do testing with TypeKit's free preview account. They also have public uptime and response stats.
There is also the option of licencing fonts for hosting on your own server. FontShop will sell you a set of WOFF+EOT fonts for a one-off price, but that will only work in IE and FF 3.6+ at the moment. You can also transfer the purchase to a free TypeKit account, which will cover Chrome + Safari too.
Typekit doesn't work in Chrome for Mac when using HTML5 markup. Apparently this has to do with the way their JavaScript works. Read more about it here.