@font-face

theonemanyuri · 26-06-2011, 11:06:30 AM

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 · 26-06-2011, 11:50:59 AM

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 · 26-06-2011, 01:50:57 PM

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

Ashton · 26-06-2011, 02:56:50 PM

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 · 26-06-2011, 03:10:46 PM

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 · 27-06-2011, 01:55:48 PM

This google font looks like a nice easy to use tool

cheers for bringing it to my attention

PoshTiger · 27-06-2011, 02:13:28 PM

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 · 27-06-2011, 04:48:59 PM

Working fine on my iphone

Ashton · 27-06-2011, 06:05:02 PM

Quote:

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

26-06-2011, 11:06:30 AM	#1 (permalink)
theonemanyuri Join Date: Jun 2010 Posts: 481 No Classified Ratings Domain Trader Rating: (100% / 2)	@font-face 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?

27-06-2011, 02:13:28 PM	#7 (permalink)
PoshTiger Join Date: Jun 2011 Location: Nottingham Posts: 230 No Classified Ratings Domain Trader Rating: (100% / 8)	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..

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Domain Name Community	Replies	Last Post
In your face !!!	doodlebug	General Board	2	06-05-2009 08:48:29 PM
1 and 2 Character .Biz Domain Names Face Delays - Domain Name Wire	RSS	Domain Name News	0	05-05-2009 04:59:08 PM
UN body warns brands face cybersquatting under plan to expand ... - Marketing	RSS	Domain Name News	0	17-03-2009 10:08:10 AM
'Landrush' in BC: New Top-Level Domain Registration Changes Face ... - PR-USA.net (pr	RSS	Domain Name News	0	11-02-2009 07:59:04 AM
'Landrush' in BC: New Top-Level Domain Registration Changes Face ... - TMCnet	RSS	Domain Name News	0	07-02-2009 02:59:04 AM

26-06-2011, 11:50:59 AM	#2 (permalink)
Tricky1 Join Date: Nov 2008 Location: Surrey Posts: 268 No Classified Ratings Domain Trader Rating: (100% / 16)	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

26-06-2011, 01:50:57 PM	#3 (permalink)
theonemanyuri Join Date: Jun 2010 Posts: 481 No Classified Ratings Domain Trader Rating: (100% / 2)	Cheers Rich, I was using font: instead of font-family: what an idiot! Always the little things

26-06-2011, 02:56:50 PM	#4 (permalink)
Ashton Join Date: Feb 2010 Location: South Coast Posts: 1,518 No Classified Ratings Domain Trader Rating: (100% / 21)	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.

26-06-2011, 03:10:46 PM	#5 (permalink)
theonemanyuri Join Date: Jun 2010 Posts: 481 No Classified Ratings Domain Trader Rating: (100% / 2)	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.

27-06-2011, 01:55:48 PM	#6 (permalink)
pbryd Join Date: Mar 2007 Location: Newcastle Posts: 348 No Classified Ratings Domain Trader Rating: (0% / 0)	This google font looks like a nice easy to use tool cheers for bringing it to my attention

27-06-2011, 04:48:59 PM	#8 (permalink)
theonemanyuri Join Date: Jun 2010 Posts: 481 No Classified Ratings Domain Trader Rating: (100% / 2)	Working fine on my iphone