I am trying to incorporate an eot/ttf file named "steve.ttf"/"steve.eot" into a CSS, but I am seeing no changes being made. The font items are located in the same folder as the html document.

Here is the code I am using:

@font-face {
 font-family: MyCustomFont;
 src: url("steve.eot");
 src: local("steve.ttf") format("truetype");

	font: MyCustomFont;

and I'm trying to insert it into this:

<p class="style1">This shoud be My New Font</p>

Do you see any errors (I'm trying to use firefox and IE)?

7 Years
Discussion Span
Last Post by SKANK!!!!!

This method works does not work on 'Chrome 1, Fire­fox 3, Safari 2, Opera 9'.


What is font: MyCustomFont? Wrong css.
Must be:

font-family:  MyCustomFont;

'font' is short hand property. You must use this for shorthand.

font: [font-weight] [font-style] [font-variant] [font-size/line-height] [font-family];
/* font:  MyCustomFont is wrong */

if it doesnt work on firefox its not worth doing. i mean firefox is ahead of the game they support the animated .pngs and ie dont


local is the local pc font store, I think, from the web server, even a web server installed locally it requires a url
something like

@font-face { 
font-family: GraublauWeb; 
src: local("Lucida Grande"), url("fonts/GraublauWeb.otf") 
format ("opentype"); }

http://webfonts.info/ font-face browser support details on browser differences

Edited by almostbob: n/a


what are u supposed to do for ie that doesn support true type fonts then?

you can also translate them into .eot files that IE recognizes, and include the

src: local(XXXX.eot);

line within the originial @font-face.


yeah son i dont rilly understand this its nothting i will be doing being that ive tried it before and it didnt work!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.