Stylize text to use different fonts for different languages?

Question

Is there a way to stylize text on an HTML page such that it automatically uses a different font for different languages? My website uses both English and Arabic. I\'d like t

Answer 1

Assuming that one of the languages doesn't include the glyphs of the other, you should be able to use font-family fallbacks. Non-english fonts sometimes include English glyphs, so set English as the main language and Arabic as the fallback. When the text is rendering, it will use the English font, and when it encounters a glyph that doesn't exist in the English font (ie any Arabic letter), it will use the Arabic font instead.

Something like this:

@font-face {
  font-family: 'your_arabic_font';
  src: url('../fonts/arabic_font.ttf');
}

@font-face {
  font-family: 'your_english_font';
  src: url('../fonts/english_font.ttf') format("opentype");
}

p {
  font-family: 'your_english_font', fallback, 'your_arabic_font';
}

Hope that helps.