@font-face

theonemanyuri · Jun 26, 2011

Is anyone using this regularly yet? I've tried it along with Google's webfonts API but neither work, I'm probably doing something wrong in the doctype.

Do you need to start with a HTML5 doctype to use @font-face?

Tricky1 · Jun 26, 2011

Haven't used font-face before but have used Google fonts quite a bit which i'm sure is similar..

Not sure why you are having problems but hopefully this may help.

Using the Cabin font as an example, add this <link href='http://fonts.googleapis.com/css?family=Cabin&v1' rel='stylesheet' type='text/css'> inside the <head> area.

Then if you want to make it the font for the entire site in your css add this:

body {font-family:"Cabin";}

It can be added to any element, so if you want to change just the H1 tag replace:

h1 {
font-family: "Arial",Tahoma,Verdana;
color:#999;
}

With :

h1 {
font-family: "Cabin",Arial,Tahoma;
color:#999;
}

Any problems send me a PM...

Richard

theonemanyuri · Jun 26, 2011

Cheers Rich, I was using font: instead of font-family: what an idiot! Always the little things

Ashton · Jun 26, 2011

hmm, font should have worked if it was ordered properly, font is just the short way of doing font-family, font-size, font-decoration in 1 line.

theonemanyuri · Jun 26, 2011

That's what I thought but no luck. It's the only style applied to <h1> so it can't be because of the order.

pbryd · Jun 27, 2011

This google font looks like a nice easy to use tool

cheers for bringing it to my attention

PoshTiger · Jun 27, 2011

works on an ipad?

Do google fonts work on an ipad / iphone yet?

I had to drop using them and switch to cufon a couple of months back as they made the browsers crash..

theonemanyuri · Jun 27, 2011

Working fine on my iphone

Ashton · Jun 27, 2011

Does the Google Font API work on mobile devices?
The Google Font API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

mm