font face properties of font selector is not working in my website

Question

Hi All,

I m getting a problem while embedding a font in my web site i m using a css3 rule of font selector code is

@font-face {

     font-family:'VoltaEFTU-Regular';

     src: url(/fonts/VoltaEFTU-Regular.ttf) format("truetype");
}

.sample { font-family: 'VoltaEFTU-Regular'; font-size: 10em; }

I put my volta font in truetype format in fonts folder of my website folder but its not working my html code is :

typetrigger

Answer 1

1. Check if the ttf file is at the location you point to.

2. You should use firebug to check if your font gets applied in the css.

If yes, your font is not loaded. If no, then the css class is not applied or overwritten by something else.

Answer 2

Firstly, you need to add comas to the src. It should be:

src: url('fonts/VoltaEFTU-Regular.ttf') format('truetype');

I also would recommend heading over to font squirrel though, and creating a woff and eot files to use along side the ttf.

You can read up on all the different formats here:

http://www.fontsquirrel.com/fontface/generator

Answer 3

Code looks good. I agree with Thariama. Try specifying the path relatively to your CSS instead of absolute (../fonts/VoltaEFTU-Regular.ttf) if your css file is in a subdir of your web root. Also, make sure the browser you are testing in supports @font-face and truetype fonts