@font-face - true-type fonts

20th October 2009

ttf fonts for your web pages

Have you ever wanted to use a 'non-standard ' font in your web pages? Well, now things are looking up and several browsers are able to display ttf fonts using just CSS. If you are viewing this page in the latest versions of Firefox, Opera, IE6, IE7, IE8 and Safari (Mac) then this font is
' Artbrush Medium TTF '.

See the information below.

copyright © stu nicholls - CSS play


If you want a good selection of ttf fonts that will work in this way then just visit Font Squirrel 2 where you will find downloads of .ttf and .eot in '@font-face Kit' zip files which contain all you need to get you started.

The stylesheet for the above demo is shown below

@font-face {
    font-family: 'ArtBrush Medium';
   src: url('Artbrush.eot');
   src: local('ArtBrush Medium'), local('ArtBrush-Medium'), url('Artbrush.ttf') format('truetype');
h1.fontface {font: 60px/68px 'ArtBrush Medium', Arial, sans-serif;letter-spacing: 0;}

p.style1 {font: 20px/27px 'ArtBrush Medium', Arial, sans-serif;}

Tested in IE6, IE7, IE8, Firefox, Opera and Safari(Mac)

Browsers that do not understand will just see the text in 'Arial' or 'sans-serif' fonts.


You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page