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.
Related
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'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.
Are Google Fonts as reliable as the standard fonts shipped with PCs, in terms of browser compatibility? Right now we upload a lot of custom fonts for our site, but we have some issues with various browsers (even across web standards). Some say just go with Helvetica, Arial and the usual suspects for across the board rendering accuracy. But do Google Fonts offer creative solutions without sacrificing rendering accuracy?
In short, yes.
Web fonts are great, but you need to remember that if the content delivery network is down then users will not get the font, so make sure you include fallbacks in your font-family all the way down to either serif or san-serif.
The other option is to package the fonts you want to use so that users can download them if they are missing, but the packaging and delivery process is pretty cumbersome. Also you might run into licensing issues.
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.
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.