Can you use 'Italic' in wordpress as separate font, not as alteration of 'Regular'?

Question

My site uses the font 'Arno Pro' in the Paragraph style.

The font 'Arno Pro Italic' is not used.

So when I highlight a word and click the Italic button, Wordpress simply distorts the Regular version to make an italic version.

As you might know, actual italic fonts are separate fonts to their regular siblings.

But as I understand, some programs do not use the separate italic font. Instead they distort the regular versions.

I believe Microsoft Word is an example of a program that distorts Regular versions to make an Italic version of a font.

And Adobe InDesign is an example of a program that uses the separate fonts. With Adobe InDesign, in order to use an Italic version of a font, that Italic version needs to be installed on your system. Otherwise there is no 'Italic' option.

As I understand, WordPress works like MS Word re this – it distorts Regular fonts to display words Italicised.

My question is: Is it possible to use an actual Italic font with WordPress?

So is it possible for me to set a word in Arno Pro Italic that is within a sentence that is in my Paragraph style Arno Pro.

You probably don't need the link to my site to answer this – but to see Arno Pro in the body copy, here's the link: http://richardclunan.com

Answer 1

You can define the fonts that the browser should use for italic and bold variants in your theme's stylesheet alongside your original @font-face declaration, as shown in this article.

For your site, it might look something like this, depending on how Arno Pro Italic is named:

@font-face {
    font-family: Arno Pro;
    src: url('/wp-content/uploads/Arno%20Pro.ttf');
}

@font-face {
    font-family: Arno Pro;
    src: url('/wp-content/uploads/Arno%20Pro%20Italic.ttf');
    font-weight: normal;
    font-style: italic, oblique;
}

The browser should then automatically use the alternate font for any body text wrapped in <em> or <i> tags, because you've already specified font-family: Arno Pro in your stylesheet.