A test post using Google’s font directory beta

This is a test headline

The headline above should be using a font called “Tangerine”. It’s 40kb compressed which isn’t bad at all. This body copy font should display as “Josefin Sans Std Light” and it comes in at 21kb compressed. Overall, you can do this stuff using CSS3 and I wonder if Google is just making it a little easier by hosting the font files and allowing developers and designers to worry less about any legal issues revolving around font usage on the web.
Here is a link to follow to get you started yourself: Quick Start, Google font directory
And yes, it looks like Google is indeed serving up css where the specified font family is linked via obfuscated URL at a googleusercontent subdomain (themes). Browsers will behave a little differently.
Chrome will render the page, but until the font has loaded, there will be a blank space in it’s place. Firefox will render default font text and once the font has loaded, replace the text. It’s called “flash of unstyled text.” Safari renders like Chrome. Internet Exploder renders like Chrome as well.

3 thoughts on “A test post using Google’s font directory beta

  1. Well, this doesn’t work on an iPad because i am writing this comment on mine and the style sheet is defaulting for me. Maybe the 4.0 this Fall for iPad will bring support for it.

  2. Strangely enough, the blog title renders fine in IE8, but the body font does *not* work.

    Also, fonts look really bad in Windows 7 (at least w/my settings) in pretty much every browser (including Safari.)

    The “Josefin Sans Std Light” is really light and washed out. Tangerine looks ok in some browsers, but blocky in others. However, this is what I was seeing on the Google Fonts API page too.

  3. I am not sure how I feel about this right now. I have been doing my own CSS3 font embedding thing for a while on internal projects where I know the browser to be used. Doing that, I have much more control.

    Now in regards to Windows 7, I have no answer. I wonder if Google’s implementation isn’t quite up to snuff yet. I did a double font load, perhaps that’s not working for Internet Exploder yet?

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.