Web fonts

[Barrucadu]

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]

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

 

[Barrucadu]

To define a web font:

@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:

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

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

 

[elias75]

To define a web font:

@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:

@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]

Great news mate,
Thanks.

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