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

Answer 1

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…)

Answer 2

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.