cant get @font-face to work correctly

Question

I have downloaded a font face kit from font squirrel, and created a css file with the given code. I copied all of the woff, ttf, eot, and svg files to my public folder, and have created a h1 code that references the font that I want to use. However when I go to check to see if the font is working, I just get the standard times new roman. If I put a backup font next to the one I want to use, I get that font. Does anyone know why this may be happening? Here is the code I am using.

@font-face {
font-family: 'CartoGothicStdBook';
src: url('CartoGothicStd-Book-webfont.eot');
src: url('CartoGothicStd-Book-webfont.eot?iefix') format('eot'),
     url('CartoGothicStd-Book-webfont.woff') format('woff'),
     url('CartoGothicStd-Book-webfont.ttf') format('truetype'),
     url('CartoGothicStd-Book-webfont.svg#webfont1l1oLWSU') format('svg');
font-weight: normal;
font-style: normal;

}
.carto {
font-family: CartoGothicStdBook, Arial;
color: #333333;
font-size: 44px;
letter-spacing: -3px;
}

<h1 class= "carto"><b>Share Your Knowledge & Explore Your Passions<b></h1>

@demondeac and that HTML file is in that same directory as well? — Pekka
ah I figured it out I needed to add another / to the source url. — tomciopp

Jordan Jordan · Accepted Answer · 2011-03-13T17:53:08

are you importing these fonts from an external style sheet? When I placed my fonts in the same directory and embedded the @font-face declarations directly in my pages as applicable, I had no problems, but it didn't seem like I was able to link to a relative source. I'm wondering if this has something to do with all the fuss over licensing issues. Another thing...I seemed to have better luck referencing fonts with '' e.g.:

    ul li:nth-child(6n),#filler {
    color:#3F9;
    font-family:'WCRhesusABtaRegular';
    }

where the corresponding font would be:

        @font-face {
            font-family: 'WCRhesusABtaRegular';
            src: url('WC_Rhesus_A_Bta-webfont.eot');
            src: url('WC_Rhesus_A_Bta-webfont.eot?iefix') format('eot'),
                 url('WC_Rhesus_A_Bta-webfont.woff') format('woff'),
                 url('WC_Rhesus_A_Bta-webfont.ttf') format('truetype'),
                 url('WC_Rhesus_A_Bta-webfont.svg#webfonte627I3xy') format('svg');
            font-weight: normal;
            font-style: normal;

        }

btw, this is an awesome font for decorative purposes (if you want to go Jackson Pollack all over your website), not so much for reading :)

hope this helps if you run into any more issues...if you did figure out a way to import font style sheets or place fonts in a separate directory, I would certainly like to hear about it...I haven't been able to find examples on the web where anyone is importing fonts...but I have seen people use a /Fonts directory. This may also be a licensing related item?

Oh and a quick note for those of you who are just getting started with @font-face (I'm just getting started myself) ... there are a couple of "gotchas" that Paul Irish mentions, but you should make sure that fonts are not locally installed as your browser will use your local fonts if available - this makes your testing unreliable...of course it's not too difficult to uninstall the fonts (at least in Windows 7).

Here's some more info from Paul Irish:

http://paulirish.com/2010/font-face-gotchas/#comment-48744

cant get @font-face to work correctly

2 Answers