Only some #font-face are loading - css

Question

I have the following at the very tippy top of my master CSS file for my site
#charset "UTF-8";
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratRegular.woff2") format("woff2"), url("../../fonts/montserratRegular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratRegularItalic.woff2") format("woff2"), url("../../fonts/montserratRegularItalic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratBold.woff2") format("woff2"), url("../../fonts/montserratBold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratMedium.woff2") format("woff2"), url("../../fonts/montserratMedium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratMediumItalic.woff2") format("woff2"), url("../../fonts/montserratMediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratLight.woff2") format("woff2"), url("../../fonts/montserratLight.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/*!
* Font Awesome Free 5.6.1 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
#font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
src: url("../../fonts/fa-solid-900.eot");
src: url("../../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-solid-900.woff2") format("woff2"), url("../../fonts/fa-solid-900.woff") format("woff"), url("../../fonts/fa-solid-900.ttf") format("truetype"), url("../../fonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/*!
* Font Awesome Free 5.6.1 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
#font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: normal;
src: url("../../fonts/fa-brands-400.eot");
src: url("../../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-brands-400.woff2") format("woff2"), url("../../fonts/fa-brands-400.woff") format("woff"), url("../../fonts/fa-brands-400.ttf") format("truetype"), url("../../fonts/fa-brands-400.svg#fontawesome") format("svg");
}
.fab {
font-family: "Font Awesome 5 Brands";
}
But only some of the font files are loading and I don't quite understand why. The montserratRegular, montserratBold, montserratLight, and fa-solid-900 are the only ones that load. If I remove the #font-face definitions for the Font Awesome fonts, then additionally the montserratRegularItalic font will load.
If I remove all font definitions, and only add one of them, that single #font-face will load. With the exception of the Font Awesome Brands, that #font-face never seems to load even if it's the only definition in the file.
I've double checked the files exist on the server, and there's no 404 or other errors/warnings in the console. It just seems like the browser just refuses to load them.
I've only tested this behavior deeply in Chrome, so I'm not sure if this is just a Chrome thing, although I did open the page once in Safari and saw similar behavior.

Answer 1

Welp, this makes sense. The other fonts weren't loading because nothing on the page was using them. And of course they did load when they were the only font available for the font-family I was using. And in the case of the FontAwesome Brands not loading, it was staring me right in the face, I was using the wrong classes.
I had
<i class="fa fa-facebook"></i>
Instead of
<i class="fab fa-facebook"></i>