CODEWITHSUNDEEP
htmlcssfonts
Abdou
Abdou

Reputation: 40

@font face is not working

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

What might be wrong ?

Update :

I use firefox

Upvotes: 1

Views: 2336

Answers (3)

phpniki
phpniki

Reputation: 758

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;
}

Upvotes: 4

Mouhamad Kawas
Mouhamad Kawas

Reputation: 370

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.

Upvotes: 0

sanoj lawrence
sanoj lawrence

Reputation: 993

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")
}

Upvotes: 0

Related Questions