How to debug #font-face problems? - html

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.

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

Answer 4

If you're prototyping and watching your freshly generated HTML as static, local files, the fonts might not load. ( Because of some cross-domain policies by the browser?)
So, would need to request your html via a (local) server.

Answer 5

please check your link to source
#font-face {
font-family: 'theMixPlainSemiBold';
src: url('../css/fonts/.eot');
src: url('../css/fonts/.eot?#iefix') format('embedded-opentype'),
url('../css/fonts/.woff') format('woff'),
url('../css/fonts/.ttf') format('truetype'),
url('../css/fonts/.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
maybe you forgot about ../ because if fonts from google working normal so your link (source) your font must be wrong