@font-face issues

css font-face embedded-fonts
Diventare Creative picture Diventare Creative · Jan 28, 2011 · Viewed 21.9k times · Source

I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using @font-face?

I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.

The css for the style sheet fonts is:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/bebasneue-webfont.woff') format('woff'),
        url('../fonts/bebasneue-webfont.ttf') format('truetype'),
        url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
    font-weight: normal;
    font-style: normal;

The other styles sheets for layout, etc call the font like this:

}
#merchandise h1 {
    font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
    font-size: 33px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Anything obvious? Of course, it works locally on my machine because I have the font installed.

Answer

Josh Stodola picture Josh Stodola · Jan 28, 2011

In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"

or

In @font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'

Related questions

@font-face works in IE8 but not IE9

As described above, I have issues with @font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully …

Read More
How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More