Font conditional style CSS-CodePudding

I have a website that uses one Latin and one Arabic font (Adobe typekit fonts).

The headings (h2,h3) are in Italics and sometimes are written in Latin and sometimes in Arabic.

So I have a CSS rule:

h2, h3 {
font-family: Latin, Arabic, serif;
font-style: Italic;
}

My problem is that the Arabic font does not have italic characters, as Arabic is a language that is written with font-style: normal; so instead of using the Arabic font, it falls back to an ungly system font.

How can I have a CSS rule which defines when the Latin font is chosen to be used then to use Italic characters and when the Arabic font is chosen, to use normal characters?

CodePudding user response：

i think you must add the "!important" to your font style

h2, h3 {
font-family: Latin, Arabic, serif;
font-style: Italic !important;
}

CodePudding user response：

 <div>
          <h2>Latin text</h2>      
          <h3 >لكن لا بد أن أوضح لك أن كل<h3>
        </div>   
    
          <style>
                h2, h3 {
        font-family: Latin, Arabic, serif;
        font-style: Italic;
        }
                 .ar{
                  font-style: normal; !important
                }
              </style>

is this what you are expecting ?