PinoyTech.org

CodeIgniter, Kohana, Mootools, jQuery and CSS

Firefox 3.5 Font Face Support

Posted by teejay on June 18, 2009

I've just installed the Beta Version of Firefox 3.5. I can honestly say that I packs a lot of improvement.

I am mostly talking about the CSS support that has gone into it.

I've been experimenting a while back about using download-able fonts in web pages. Right now, my header uses a very uncommon font which I downloaded from fontsquirrel.

The thing is, it's so easy to implement. Here's how:

@font-face {
    font-family: Aller;
    src: url("http://pinoytech.org/application/views/templates/minimal/font/Aller_Lt.ttf");
    font-style: normal;
    font-weight: normal;
}

With the following code you can do this in your style sheets.


body {
 font-family: Aller, Arial, Sans-serif;
 text-rendering: optimizeLegibility;
}

This just one of the many exciting things in Firefox 3.5.

This is already supported by the Safari 4

Note: If you upgrade to Firefox 3.5, some plugins might not work.

Categories: How To, Web Development

Tags: css

4 Comments

Renee

Too bad this doesn’t work yet with Chrome.

November 2nd 2009

Thorpe Obazee

@Renee. Chrome will support @font-face in version. 4.0. Please read this blog post by Paul Irish about Chrome’s @font-face support.

November 2nd 2009

james

hey dude. i was searching the word font-face and your one of the list on the first page in google. wazza up?btw, thanks to your post. ;).

November 22nd 2009

Darrel Girardier

Okay I have tried @font-face rule but it does not seem to work for me when it comes to firefox.  My url is http://blog.darrelgirardier.com

January 7th 2010

Comments are not allowed