Fonts can be loaded in various ways, from a [[20221107042836-cdn]], locally, and more. The more interesting part is how the fonts are used by the browser.
A standard @font-face declaration has a few bits of info:
This is repeated for every font file that needs to be loaded. This isn't an exhaustive list, and there are things like backup fonts, etc. but these are the main ones.
The interesting part is that a loaded font is disconnected from the style that's used by the browser. It's up to the developer to set that mapping.
For example Inter has various styles, ranging from 100-900 weight. Inter Bold is made to be used at 700, but if desired, a developer could load the font at 800. Then, Inter SemiBold could be loaded at 700, which will be used whenever a user specifies font-weight: bold.
This can be taken to the extreme, in theory, you can set a single font-family that loads an entirely different font for the italic style, assuming it's all under the same font-family.
Note that if you don't load a particular font, the browser can still create a fake version of it. This is true for both faux bold and faux italics. This version won't be as refined and polished as hand-crafted solution, but it does save on performance as you don't have to load additional fonts.
https://fonts.google.com/knowledge/using_type/using_web_fonts https://www.smashingmagazine.com/2012/07/avoiding-faux-weights-styles-google-web-fonts/