CODEWITHSUNDEEP
htmlcssfont-face
Brian Rivet
Brian Rivet

Reputation: 89

@font-face css not working

I'm having trouble with an @font-face declaration and I'm hoping someone can tell me what the problem is.

Here's my @font-face CSS:

@font-face {
font-family: 'MuseoSlab500';
src: url('fonts/Museo_Slab_500-webfont.eot');
src: url('fonts/Museo_Slab_500-webfont.eot?iefix') format('eot'),
     url('fonts/Museo_Slab_500-webfont.woff') format('woff'),
     url('fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
     url('fonts/Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
font-weight: normal;
font-style: normal;

My font files are all in a folder in the root of my site called 'fonts'. The stylesheet and the html file (it's a one page site) are in the root. I'm looking at the @font-face and it looks no different than declarations I'ved before yet for some reason this one is not working. Can anyone tell me why this is?

Thanks,

Brian

Upvotes: 1

Views: 4913

Answers (2)

Sharjeel Khan
Sharjeel Khan

Reputation: 1

Try to use .otf file instead of .ttf

I had also faced this problem. I got it working by replacing to .otf file.

Upvotes: 0

Nasir
Nasir

Reputation: 4865

I always put my web fonts folder inside my CSS folder like this:

@font-face{ 
    font-family: 'CartoGothicStd-Bold';
    src: url('@font-face/CartoStd-Bold.eot');
    src: url('@font-face/CartoStd-Bold.eot?#iefix') format('embedded-opentype'),
         url('@font-face/CartoStd-Bold.woff') format('woff'),
         url('@font-face/CartoStd-Bold.ttf') format('truetype'),
         url('@font-face/CartoStd-Bold.svg#webfont') format('svg');
}

My folder is called @font-face. Give it a go...see if you get the fonts working.

I just noticed you're missing }

Upvotes: 2

Related Questions