How to debug @font-face problems?

Question

I have the following CSS code:

// theMixPlainSemiBold
@font-face {
    font-family: 'theMixPlainSemiBold';
    src: url('/css/fonts/... .eot');
    src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
         url('/css/fonts/... .woff') format('woff'),
         url('/css/fonts/... .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I expect that this creates a new font family called theMixPlainSemiBold.

After importing this font I do:

.box {
    ...
    font-family: 'theMixPlainSemiBold', sans-serif;
    ...
}

I have the box class that have theMixPlainSemiBold font family.

When I open the page I see sans-serif font in the .box.

What can be the problem? Same is happening for the other local web fonts while it works good with Google Fonts.

How can I debug the font problems? I don't see any errors/warnings in developer tools. It looks for me like the font is not loaded from local files...

Solution 1

While this is not a real answer to the question, I found the problem myself. Double-slashes (//) are not valid CSS comments! See this screenshot from Developer Tools:

So, my code becomes:

/* theMixPlainSemiBold */
@font-face {
    font-family: 'theMixPlainSemiBold';
    src: url('/css/fonts/... .eot');
    src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
         url('/css/fonts/... .woff') format('woff'),
         url('/css/fonts/... .ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

The fonts are correctly loaded now.

Solution 2

First, using an unambiguous custom font-family name may help debugging since it will prevent your local fonts to be triggered and used.

Then, while this is not restricted to @font-face issues, Firefox developper tools' console can surely help debugging CSS issues.

In your case, it would have detected the bad comments:

Selector expected.  Ruleset ignored due to bad selector.  yourfile.css:23

In my case, due to bad editing after a copypasta I had a trailing comma instead of a semicolon, which prevented Firefox to download the font:

@font-face{
    font-family: SuperFont;
    src: url('../fonts/Superfont.ttf'),
}

The console came up with:

Error in parsing value for ‘src’.  Skipped to next declaration.  myfile:18

Or the console may complain about:

downloadable font: download failed (font-family: "myfont" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: url/to/font.otf

(This would typically follow a 404 on the font URL, damned typos…)

Solution 3

@font-face {
    font-family: anyname;
    src: url('folder/folder2/folder3/theMixPlainSemiBold.ttf');
        font-weight: normal;
        font-style: normal;
}

then use it like this:

#sample{
    font-family:anyname;
}

you can use any name in it. / is important in the url because it shows that it is inside a folder.

Comments

[mcmac]

your code is correct, so problem is with source, you must check you link to this font. Open you browser, show source your website and check links to your font. I use ../ because maybe you links is not correct. Please check links to fonts.

[Ionică Bizău]

I found the answer. My problem is finally solved. Thanks.

[surfbird0713]

I had this same exact problem and removing the single line comment style was the fix. However, just wanted to add that firebug was more helpful in solving this over chrome debugger, as it shows you the fonts as they are being rendered when you hover over the font family name; chrome does not. This was helpful since my custom font was somewhat similar to the default sans-serif being pulled in.

[kr37]

Thank you for the tip about using the console! Huge help.

[Dan Bechard]

This was my problem.. every wrote how to make a @font-face but nobody wrote that you had to manually apply it to elements! I asumed it would just apply to the whole page by default. Doh. Thank you.