Google Font API

[David]

I hadn't noticed but Google currently have an @font-face service in beta. It looks very good and easy to use. There's a great article (http://sixrevisions.com/web_design/google-font-api-guide/) on Six Revisions, detailing its use. The range of fonts (http://code.google.com/webfonts/) is currently limited but I imagine it will be vastly expanded once the API comes out of beta.

[francis]

If you somehow haven't heard of Typekit, then they're going great guns on the fontface thing. There's also fontdeck which is a clearleft-related tool and pretty good—you can see fontdeck supplying the non-standard fonts on the recently launched http://lanyrd.com/ social conference site.

[linglau]

Hey originally started new thread but thought it wiser to just continue from this one.

This may be old news but Google has further extended their fonts directory service by providing a nifty font previewer (http://code.google.com/webfonts/preview#font-family=Cantarell) where text may be customised by the user and it will then create the CSS code to be attached to a div tag or class in the style sheet.

Pui

[Magdalena]

Fantastic, I didn't know that! Thank you! :)

[mac928]

Wow .. this is very usefull for our web project.

But I used the fonts from MS Word all the time.......it;s very simple just copy the font's name from MS Word ... then past the new font name into CSS in Dreamwer .....
This is how I done it in my webdesign 3 product coureswork .....

[linglau]

I think the prob with using MS Word is that not everyone will have all of MS Words fonts or even have MS Word itself. However I suppose if you make sure your font stack backs this up with fonts that you're happy users seeing if they don't have the MS font, than that's fine.

That's why the Google Font API is so good, as you can imbed fonts really easily for everyone to see. :) it's extremely useful!

[kc005]

HI all - I have been using font embedding by google but the code does not verify in unicorn validator it doesn't like the href (or parts of the syntax within) that google gives you , therefore it fails - anyone out there any views, workarounds on this finding ? Cheers casey

[David]

Most common reason for this is an unescaped ampersand in the URL. It annoys the hell out of me that Google do not provide standards compliant URLs in their code inserts. So, this: "&", should be written as this" "&".

[linglau]

Yes I used the Google font embedding and in order to validate I just took out the bits that w3c didn't like. I.e. for one of mine it didn't like "&subset" or something, so I just removed it from the code and the embedding still worked.

Also sometimes you need to add "http://" at the front of the code as it doesn't automatically do it for you if you just copy and paste the code directly from the site.

[Bruno]

I’ve used the Google Font Directory recently but haven’t noticed the validation problem. Good news that the solution is quite simple.
Some other good points about Google Fonts are the fast font loading and the fact that it’s entirely free.

[kc005]

Thanks David and Pui - I have used this combination and it now valiates (if you take subset out it doesnt) <link href='http://fonts.googleapis.com/css?family=Tangerine&amp;subset=latin' rel='stylesheet' type='text/css'/> the key bit is ; before subset and David's unescaped ampersand solution