I have done quite a bit of research at this point on the usage of @font-face, and am familiar with some of the challenges, but have nonetheless decided that I wanted to use it for my application. However, for some reason completely unknown to me, the browser is not loading the expected font-face.
I have a CSS file with declarations as follows: Note that the "!important" was me messing around with things, it did not appear to have any effect.
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
.cerberus-body {
margin: 0;
font-weight: normal !important;
font-family: roboto;
}
Here is a screenshot of the structure of my web:
As you can see from the screenshot the src paths on the font-face declarations match up with what I have in my directory, and I have verified they are reachable from my deployed site.
The body elem of my page has the following:
<body class="cerberus-body"></body>
I have verified in dev console that the styles and declaration are working as expected.
Given all of that- here is what I see in the network tab of my dev console when loading my page: (It shows only Roboto-Black and Roboto-Bold getting loaded)
And when I inspect an element on the page I see that the styles piece shows a rendered font of Roboto Black:
Inspecting the Body on the page I see that my styles are reflected as I would expect, and the css class is getting honored:
At this point, I'm really at a loss here. I could use any help or direction on where to go next troubleshooting this. I'm at the point where I think it's likely I'm going to give up on the custom font, but this is a last-ditch attempt to save my dignity.
Given that the fonts don't appear to be loading at all through the network tab, I must be missing something with how the rendering engine determines what font faces to lazy load. Beyond that, I'm at a loss.
Update
After reading through another question supplied in the comments by Pete, I read that some of the commenters recommended changing the order with which the font-face rules are defined. I flipped the order of my rules and sure enough, the font rendered as expected.
I'm hesitant to close the question though, as I have no clue why this works and would like to understand the underlying implementation.
For posterity- my new declarations
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}
