#font face is not working - html

Question

I am trying to add Futura web font to my webpage but when i add this to a independent css file which named fonts.css
#font-face {
font-family: futura;
src: url('/fonts/Futura LT Bold.ttf')
}
Then i added this to my main css file :
h1{
font-family: futura;
}
But the font does not change when i explore my files with web inspector(firefox) i see that the font family is sat to futura but when i check for the font i get this :
But futura is not like that (serif font) my files hierarchy is like this
Root folder
Page.htm
JS
Java.js
css
fonts.css
style.css
fonts
Futura LT Book.ttf
Futura LT Light.ttf
What might be wrong ?
Update : I use firefox

Answer 1

maybe your font file have a problem and it is not for web.
you can use one of the online convertor like http://www.font2web.com/ to convert the font to all font format files and use css below for your font-face implementation
#font-face {
font-family: 'Conv_FREESCPT';
src: url('fonts/FREESCPT.eot');
src: local('☺'), url('fonts/FREESCPT.woff') format('woff'), url('fonts/FREESCPT.ttf') format('truetype'), url('fonts/FREESCPT.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 2

try this
replace:
#font-face {
font-family: futura;
src: url('/fonts/Futura LT Bold.ttf')
}
with:
#font-face {
font-family: futura;
src: url("../fonts/Futura LT Bold.ttf")
}

Answer 3

I think you need double period (..) on your src, which means you go up one folder and then look for the folder behind the slash. For example:
src: url('../fonts/Futura LT Bold.ttf')
Another problem could be that your browser might not support . ttf font-files, you need to add .eot.