font-face with bold weight not being recognized - css

Question

I am using 2 #font-face on my index.css file with the purpose of using a font in regular weight and in bold weight as my default font in my entire application:
index.css file:
body {
padding: 0px;
margin:0px;
font-family: "LucidaGrande";
}
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}
Now, the regular weight seems to be working for the entire application, however, on an other part of my application I am trying to use the font in bold weight like this:
#presentation-text em{
font-size: 35px;
color: rgb(139, 59, 28);
font-style: normal;
font-weight: 900;
}
However the 900 i.e the bold weight is not being applied, still regular.
Am I using this correctly?

Answer 1

If you're using #font-face, never use local(...). The whole reason you're using #font-face is to ensure that you control exactly which font resource gets loaded for which (set of) font properties. The last thing you want is for the OS to black-box fetch you what it thinks the font is for the name you specified. Even if it really does find Lucida Grande for some user, there is zero guarantee it's going to be the same version you have installed on your development machine.
Interestingly that actually tangential to the real problem here: the way you've written your CSS right now means that, because you have the font installed locally, whatever follows local(...) will never even be looked at by the browser, similar to what happens when you're using font-family: serif, Times. The browser knows how to resolve the first thing, so it immediately stops: it already found what it needed to find.
Effectively your current CSS, running in a browser on your own machine, says this, as far as the browser is concerned:
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande);
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande);
}
So you're loading the exact same thing in both declarations. As CSS weights for the text shaper in the browser are entirely independent from the system text engine, the result is exactly what you're seeing: both rules declare the same font resource as the one to use when you say font-family: LucidaGrande, both with or without font-weight: 900.
Drop local(...) and it'll instead work exactly as you need it to.
Also, you'll want to turn those .ttf files into WOFF2 and then load those, because they're much smaller, as well as a promise to the browser that these are indeed unencumbered webfonts.