Search code examples
cssfontsfont-face

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.

Solution

  • 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.