skip to content
Website Builder

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



CSS play Support


CSS play Recommend

uk white label shopping carts for resellersFree, practical CSS menus, layouts, and examplesSitegrinderPSD to HTML



Information

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.




Copyright

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.




CSS play Recommend

CSS play Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth