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

It is not possible to set different fonts for different languages without distinguishing pieces of text by language at the markup level. You would normally use tags with a class attribute or a lang attribute or both. The lang attribute is the logical choice, whereas styling works somewhat more reliably when using class (since class selectors are supported by all CSS-enabled browsers).

Note that you may well need such markup for other purposes as well. In the case of Arabic text on dominantly English pages, it’s usually best to use bdi markup together with lang=ar and dir=rtl attributes as well as bdi { unicode-bidi: embed } in CSS, to deal with directionality. (In your message, the Arabic text has the period misplaced, at the start, i.e. on the right, due to directionality issues.)

It is possible to use client-side code that runs some language-guessing program and modifies the DOM accordingly, but this is unreliable and somewhat complicated.

As a rule, all copy text in a document should be in the same font. This can be difficult to handle (there is no truly all-encompassing font that one could successfully use on web pages), and some languages may require special fonts in practice. But there are several reasonable fonts that cover both English and Arabic, for example.