Using Weights and Styles
As your web vocabulary increases, we need to revisit some earlier concepts to update our understanding on their usage.
For many of these values to work, the equivalent font-family for each font weight or style (i.e. “Times-ExtraBold.otf” & “Times-Italic.otf”) must be loaded on the client’s computer. Otherwise, the browser will round to the nearest font weight or estimate a style comparison.
Strong vs. Bold
When we wrap words with the <strong>...</strong> element, the browser is trying to find a “bold” version of the font. If none exists for the specified font, then they browser may try to bold the selected words on its own (this assumes we have not overwritten the strong elements rules in our CSS).
I am "normal" weight, using no tags.
My weight is "bold", made with <b> tags.
I am "strong", made with <strong> tags!
Italic vs. Oblique
As with “font weight”, the “font style” property will try to find an appropriate, and dedicated, italic font family. If it is unable to do so, it will try to “italicize” the font itself. When a browser slants a font to achieve an italic effect (assuming it was unable to find a truly italic equivalent), this is actually known as an “oblique” style.
In the following example, I have set it up so that each element uses the same font family (“PlayfairDisplay-Regular.ttf”), but I have made it so that the true, “italicized” version (“PlayfairDisplay-Italic.ttf”) is not available to the #heading-2 element.
Notice the difference between the second and third elements. Depending on the browser, the second is either a simple slanted version of the first or the same as the first (again different browsers display things differently).
But the third includes unique serifs (look at the capital ‘T’s) that are part of the italic version of the font.
I am "normal" style, using “Playfair Display Regular.”
I am fake ITALIC, made with <i> tags. I am "oblique", if at all...
I am a true "ITALIC" style, using “Playfair Display Italic.”
AM I NOT BEAUTIFUL?
Assuming your fonts are loaded correctly, this will not be an issue for you. Specifying an elements style as “italic” should select the correct font-family. If it is not, then you know you need to check your font loading.
IMPORTANT: At the end of the day, this means you always need to check you site on multiple devices, to ensure it is being displayed as you intend it to be.