When using @font in the css, and including normal, normal-italic, bold, and bold-italic faces, then assigning the bold face to headlines, how do you tell the HTML to use the specific bold-italic for any or tags for the headline style ONLY. Meaning i or em for other styles should use their own fonts.
I can only seem to get faux italic for the bold face for h1 through h6. I don’t know hoe to apply the bold-italic face when I use i or em tags for a single word within the h1 through h6 headings.
Now all you have to do is apply that single font-family to your target, and any nested bold or italic styles should automatically use the correct font. Still apply bold and italic styles if your custom font fails to load.
Thank you for this detailed response. And my apologies for this late response. Life distracted me from my font pursuits.
I did indeed try this format in my CSS (woff and woff2 only). What happened to me for three different fonts was that the font would load, until it hit bold italic, and then the server defaulted back to my next declared sans-serif in my CSS.
The first font was Helvetica. I understand from other discussions that Adobe has made it difficult to use online for intellectual property reasons (I do have the appropriate license). The next font was Arimo (sourced from Font Squirrel). Unfortunately there’s no condensed face included. Finally I decided to use Helvet from the LaTeX font repository for headings only, with Arimo as primary sans-serif for non-headlines.
Have you been able to use an extended family-any kind- to get all major variations (italic, bold, bold italic, and condensed) to work happily at any time using the syntax you so kindly typed out for me?
Also, what method would you recommend to get EOT from OTT?
What is your view on the contradictory advice given by some designers to name every face of a font with its own unique name in the@font-face in the CSS? Wouldn’t that mean you’d have to embed specific font names inline?
Thanks again for your detailed and on-point response.
I’ve heard with this solution there can be a problem, if the custom font doesn’t load for some reason, the browser is no longer applying bold or italic styles to the fallback font, but I can’t confirm that, I never had this problem.
I just listed all formats, because I didn’t know what format you were using, but in 2020, I asume you’re safe to just use WOFF2, every modern browser supports it, with WOFF fallback (IE11).
WOFF2 support
WOFF2 (improves on WOFF), it is supported by most desktop browsers released after 2014, and is supported by most mobile browsers since 2018.
WOFF support
WOFF supported by Internet Explorer in IE9 (released in 2011), which renders the EOT format obsolete for versions of IE released since 2011.