CODEWITHSUNDEEP
cssfontsfont-face
J.P Masangcay
J.P Masangcay

Reputation: 769

Using @font-face problems

I'm having a little trouble with using @font-face which really confuses me. I think I'm doing right or not.

So I made the declaration 

@font-face{
    font-family: Art Post black; 
    src: url('/fonts/ArtPostblack.ttf');
    }
@font-face{
    font-family: SimplyDelicious; 
    src: url('/fonts/SimplyDeliciousFont3.ttf');
    }

Then made the calls 

#blah{font-family:Art Post black; } #blah2{font-family:SimplyDelicious;}

Now problem is Art Post black works but SimplyDelicious doesn't work Also when I remove Art Post black font. it doesn't change meaning the custom font is still not removed. So... I'm confused, am I doing it right? well I guess not.

Upvotes: 0

Views: 4919

Answers (2)

Jack
Jack

Reputation: 1472

This way of calling different font may help :

@font-face {
    font-family: 'myriadproregular';
    src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
@font-face {
    font-family: 'myriadprocond';
    src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
@font-face {
    font-family: 'myriadprosemibold';
    src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}

and in your case 



@font-face{
    font-family: Art Post black; (why this font name have space? it was supposed to be like ArtPostblack )

    src: url('/fonts/ArtPostblack.ttf');
    }
@font-face{
    font-family: SimplyDelicious; 
    src: url('/fonts/SimplyDeliciousFont3.ttf');
    }

and make sure they are near to css files and proper path.

Upvotes: 0

alt
alt

Reputation: 13937

Your syntax is right, but it is very basic. First, use this recommended @font-face syntax:

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

UPDATE: You need "" around the font name in both the @font-face syntax and in your css selection if the font name has spaces in it. It won't select correctly if you don't have the single or double quotes as your code shows. That's likely your problem. Use this new bulletproof syntax though too to make it more cross-browser.

source: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Then make sure your links are correct. keep in mind, use a / at the beginning of your URL directs the browser to the root directory of your domain. So paste that into your address bar after the domain name and see if it downloads the font file, if so, your links are correct.

Upvotes: 2

Related Questions