SETTING WEIGHTS AND STYLES WITH THE @FONT-FACE DECLARATION
em { font-family: 'UbuntuRegularItalic', arial, sans-serif; font-weight: normal; font-style: normal; }
strong { font-family: 'UbuntuBold', arial, sans-serif; font-weight: normal; font-style: normal; }
Notice that the font-weight and font-style for both <em> and <strong> are set to normal . This is counterintuitive, but necessary so that the text doesn’t end up with a double-italic or a double-bold.
Using the correct font-family names — and setting weights and styles to normal — results in true italic and true bold.
The result is a true italic and true bold. Why? Because while the paragraph is set to Ubuntu Regular, the <em> element is set to Ubuntu Italic and the <strong> element is set to Ubuntu Bold— and all weights and styles are set to normal . PROBLEM: IF THE FALLBACK FONT LOADS, WEIGHTS AND STYLES WILL BE LOST While purposely stripping out weights and styles is counterintuitive, using a unique font-family name and normal weights and styles does work —as long as the Web font loads. If the fallback font loads, then all bolds and italics will be lost —because we had set all weights and styles to normal —thus making it harder for readers to see the structure of your website’s content and making it harder for them to skim the text.
118