CSS3 @Font Face

By | January 5, 2011

@fontface allows you to use fonts that before were not considered web friendly without the use of Flash or Javascript.

@fontface is not new it was actually proposed for CSS2 but only IE supported it???!!!!

In order to use the font you must save it to a folder and then create it with the @fontface rule.

@font-face {
	font-family: Tabun;
	src: url('Tabun.ttf');
	}

Once the font is created you can use it in your document as a normal font

.change-font {
	font-family: Tabun;
        color:#ff0000;
        }


You can also add text shadow if you like

.change-font3 {
       font-family: Tabun;
       text-shadow: 2px 2px 1px #999;
       color:#ff0000;
       font-size:.9em;
       }

Click here for demo of CSS3 @fontface property

Conclusion

This property works across all modern browsers and should be something that you are using right now.

It is far cleaner and more reliable than either the flash or Javascript solutions.

Leave a Reply

Your email address will not be published. Required fields are marked *