@font css and calling bold-italic

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.

Can you help?

Try the font-style property, it allows you to make text appear italicized (i.e. sloped, or slanted).

em {
  font-style: italic;
}

This property accepts one of three possible values: normal , italic , and oblique .

That gets me faux italic, not the italic font face.

I don’t know how you’ve declared your @font-face definition (you didn’t provided any code) but maybe you can try it this way:

@font-face {
    font-family: 'Fontname'; /* regular */
    src: url('Fontname-R-webfont.eot');
    src: url('Fontname-R-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontname-R-webfont.woff') format('woff'),
         url('Fontname-R-webfont.ttf') format('truetype'),
         url('Fontname-R-webfont.svg#FontnameRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Fontname'; /* italic */
    src: url('Fontname-RI-webfont.eot');
    src: url('Fontname-RI-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontname-RI-webfont.woff') format('woff'),
         url('Fontname-RI-webfont.ttf') format('truetype'),
         url('Fontname-RI-webfont.svg#FontnameItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Fontname'; /* bold */
    src: url('Fontname-B-webfont.eot');
    src: url('Fontname-B-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontname-B-webfont.woff') format('woff'),
         url('Fontname-B-webfont.ttf') format('truetype'),
         url('Fontname-B-webfont.svg#FontnameBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Fontname'; /* bold italic */
    src: url('Fontname-BI-webfont.eot');
    src: url('Fontname-BI-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontname-BI-webfont.woff') format('woff'),
         url('Fontname-BI-webfont.ttf') format('truetype'),
         url('Fontname-BI-webfont.svg#FontnameBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

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.

You could also use this solution:

@font-face {
    font-family: 'FontnameRegular';
    src: url('Fontname-R-webfont.woff2') format('woff2'),
         url('Fontname-R-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FontnameItalic';
    src: url('Fontname-RI-webfont.woff2') format('woff2'),
         url('Fontname-RI-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FontnameBold';
    src: url('Fontname-B-webfont.woff2') format('woff2'),
         url('Fontname-B-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FontnameBoldItalic';
    src: url('Fontname-BI-webfont.woff2') format('woff2'),
         url('Fontname-BI-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.test {
  font-family: FontnameRegular, arial, sans-serif;
}
.test em {
  font-family: FontnameItalic, arial, sans-serif;
}
.test strong {
  font-family: FontnameBold, arial, sans-serif;
}
.test strong em {
  font-family: FontnameBoldItalic, arial, sans-serif;
}

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.