CODEWITHSUNDEEP
cssfont-face
Carlos
Carlos

Reputation: 11

@font-face issue

Hello community!

I am currently working on our own firms web site and I can't seem to get the @font-face to work properly. This is what the css looks like:

@font-face {
    font-family: 'BebasNeue';
    src: url('type/BebasNeue-webfont.eot?') format('eot'),
         url('type/BebasNeue-webfont.woff') format('woff'),
         url('type/BebasNeue-webfont.ttf') format('truetype'),
         url('type/BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
}

#nav li {
    display: inline;
    margin-left: 20px;
    font-family: BebasNeue, Impact;
    font-size: 24px;
    color: #333333;
    letter-spacing: 1pt;
    }

The @font-face import is basically straight from the Font Squirrel @font-face generator. I haven't yet found out whats wrong and thats why I'm reaching out. I edited the font-family names and the location of the fonts (../type/).

Any help is appreciated, tell me if you need to see any other code that might be relevant to this issue. Cheers.

Upvotes: 1

Views: 854

Answers (2)

patryk
patryk

Reputation: 62

to the best of my knowledge, this is the most universal way to implement @font-face:

@font-face{
    /* for IE only (IE doesn't apear to comprehand normal CSS)*/
    font-family: "my fancy font";
    src: url("/fonts/font.eot");
}

@font-face{
    /* for non CSS-challenged browsers */
    font-family: "my fancy font";
    src: local("☼"),
        url("/fonts/font.eot") format('eot'),
        url("/fonts/font.woff") format('woff'),
        url("/fonts/font.otf") format('otf'),
        url("/fonts/font.ttf") format('truetype'),
        url("/fonts/font.svg") format('svg');
}

two @font-face sections and something that can't possibly be a filename in src: local()

Upvotes: 1

Font Squirrel
Font Squirrel

Reputation: 1571

These types of questions cannot always be answered without a URL to poke around. The syntax looks fine, but you probably have other issues. For instance, are you serving with IIS? Have you used IE9's developer tools to see if the font is loading?

Upvotes: 0

Related Questions