Font conditional style CSS

Question

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

The dynamically generated text (p) is in Italics and sometimes is written in Latin and sometimes in Arabic.

So I have a CSS rule:

p {
   font-family: "Arno-Pro", "Athelas-Arabic", serif;
   font-style: italic; 
}

The 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 ugly system font.

For demonstration purposes to make it simpler, imagine that I have this line of text:

<p> Lorem ipsum لكن لا بد </p>

How can I target the Latin letters to be loaded as italics and the arabic letters to be loaded normal?

Note: The text is generated dynamically and cannot use custom markup within.

Answer 1

You can override the actually used fonts via @font-face rules with specific unicode ranges:

p {
   font-family: "Arno-Pro", serif;
   font-style: italic; 
}

/* default latin */
@font-face {
  font-family: "Arno-Pro";
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2) format('woff2');
  font-style: italic;
}

/* override for arabic unicode range */
@font-face {
  font-family: "Arno-Pro";
  src: url(https://fonts.gstatic.com/s/notosansarabic/v18/nwpxtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlhQ5l3sQWIHPqzCfyGyfuXqA.woff2) format('woff2');
  /* arabic unicode range */
  unicode-range: U+0600-06FF;
  font-style:italic;
}

<p class="mixed">Lorem ipsum لكن لا بد latin text again</p>

In the above example we're specifying a css override for the previously declared default font mapping:

• the default font should be "Arno Pro"
• characters within the unicode range of the Arabic alphabet (in this case: U+0600-06FF) should be mapped to another font file (supporting these characters or more precisely glyphs)
• and also be mapped to font-style:italic – otherwise text would be artificially slanted (also called "faux italic").

So instead of specifying a dedicated arabic font in the font-family property, we override the font mapping like this:

p {
   font-family: "Arno-Pro", serif;
   font-style: italic; 
}

/* override for arabic unicode range */
@font-face {
  font-family: "Arno-Pro";
  src: url(fonts/Athelas-Arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF;
  font-style:italic;
}

This css rule translates to:
For this (arabic) unicode range – take the "Athelas-Arabic" font files (so this becomes the "Arno-Pro"). By adding a font-style:italic property, we circumvent a "faux-italic" slanting, since our css rule says: this is already a proprer italic font (even it's not).

Answer 2

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

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

Answer 3

 <div>
          <h2>Latin text</h2>      
          <h3 class="ar">لكن لا بد أن أوضح لك أن كل<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 ?