There are always a chance where you are building a bilingual website, useful of the localization services that comes with CMS platforms. and mostly you will be able to create a separate asset folder for each language. so you don’t end up loading both assets together. images, fonts, css files. etc…
it make sense. …
but what if the website include some user blogs/ discussion forum/ etc.. where users are able to post their content which might be in any other language than the main one. like having a user posting Arabic article or topic in the discussion form. but your discussion forum is designed and styled with English font only.
here is my sample
I have set “Helvetica Neue” as the main master font for the main body tag and made all other elements to inherits this font. but my client is very interested to have a font like “Druid Kufi” for any Arabic content.

we can’t let the visitors choose the style and font and can’t have the html editor that reach since not all visitors / users are HTML heros to figure out the right inline styles or class.
there for i thought of overriding the “Helvetica Nueu” and make the special font-face attribute “unicode-range”


@font-face{
font-family: 'Helvetica Neue';
src: url('fonts/DroidKufi-Regular.ttf') format('truetype'); font-weight: normal;
font-style: normal;
unicode-range:U+0600-06FF;
}

the unicode-range:U+0600-06FF defines the Arabic characters range, and since the content is saved and presented in UTF-8. so the range is taken from the Unicode table.

that piece of code was enough to have the browser renders English content using “Helvetica Neue” while renders Arabic content using DroidKufi Regular.

mission done.!