Web fonts

Barrucadu · 08-16-2009, 09:58 AM

I noticed today that the latest Opera (well, 10 beta), Firefox, and Safari all support the @font-face CSS3 construct. As Safari supports it, so too will all Webkit browsers soon enough (if they don't already). Naturally, IE is a pain and doesn't*.

So, who else is excited for this? I fiddled around with my website and, after a bit of trial and error, got it working. Users now see my website in the fonts I chose, regardless of whether they have them installed or not. It's wonderful.

* But I don't care about IE any more. Until IE8 it actually offered to download my personal website rather than display it.

elias75 · 08-16-2009, 10:51 AM

this is really great!
could you share the code and the steps you need to do for this to the newbie web developers?

Barrucadu · 08-16-2009, 12:19 PM

To define a web font:

Code:

@font-face{
font-family: Name;
src: url(/path/to/file);
}

Then just use it as normal. For example, in my fonts.css I have a bit like this:

Code:

@font-face {
    font-family: "Body Text";
    src:          url(/fonts/TrebuchetMS.ttf);
}

body
{
    font-family: Trebuchet MS, "Body Text";
    font-size:   13px;
}

elias75 · 08-17-2009, 09:11 AM

Originally Posted by Barrucadu

To define a web font:

Code:

@font-face{
font-family: Name;
src: url(/path/to/file);
}

Then just use it as normal. For example, in my fonts.css I have a bit like this:
????: NamePros.com http://www.namepros.com/website-development/603653-web-fonts.html

Code:

@font-face {
    font-family: "Body Text";
    src:          url(/fonts/TrebuchetMS.ttf);
}

body
{
    font-family: Trebuchet MS, "Body Text";
    font-size:   13px;
}

thanks for this... I will try it a bit later..... REPs+

JMDCreations · 08-20-2009, 07:35 AM

Great news mate,
Thanks.

Been waiting for such a thing to hear in compatibility.
Thanks for the code snippet as well, Will try today.

08-16-2009, 09:58 AM	THREAD STARTER #1 (permalink)
Barrucadu Senior Member Join Date: Aug 2005 Location: East Yorkshire, England Posts: 2,689 Follow @barrucadu	Web fonts I noticed today that the latest Opera (well, 10 beta), Firefox, and Safari all support the @font-face CSS3 construct. As Safari supports it, so too will all Webkit browsers soon enough (if they don't already). Naturally, IE is a pain and doesn't. So, who else is excited for this? I fiddled around with my website and, after a bit of trial and error, got it working. Users now see my website in the fonts I chose, regardless of whether they have them installed or not. It's wonderful. But I don't care about IE any more. Until IE8 it actually offered to download my personal website rather than display it. __________________ Website \| Blog Arch Hurd developer; GNU Webmaster; FSF member #8385

08-16-2009, 10:51 AM	#2 (permalink)
elias75 NamePros Regular Join Date: Jan 2009 Posts: 699	this is really great! could you share the code and the steps you need to do for this to the newbie web developers? __________________ Domain Name Auctions

08-16-2009, 12:19 PM	THREAD STARTER #3 (permalink)
Barrucadu Senior Member Join Date: Aug 2005 Location: East Yorkshire, England Posts: 2,689 Follow @barrucadu	To define a web font: Code: @font-face{ font-family: Name; src: url(/path/to/file); } Then just use it as normal. For example, in my fonts.css I have a bit like this: Code: @font-face { font-family: "Body Text"; src: url(/fonts/TrebuchetMS.ttf); } body { font-family: Trebuchet MS, "Body Text"; font-size: 13px; } __________________ Website \| Blog Arch Hurd developer; GNU Webmaster; FSF member #8385

08-20-2009, 07:35 AM	#5 (permalink)
JMDCreations NamePros Member Join Date: Aug 2009 Posts: 39 Follow @jmdcreations	Great news mate, Thanks. Been waiting for such a thing to hear in compatibility. Thanks for the code snippet as well, Will try today. __________________ Web Design \| Follow Me On Twitter

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)