CSS -specifying multiple fonts for different character encodings -

Question

I would like to allow multiple fonts to be applied to dynamically generated content that can have different character encoding. I have used the font-face method to modify the CSS, as follows:

.ResultsTitleClass{ font-family: 'custom-font', Arial Unicode MS, Arial, verdana; !important ; }

@font-face {
font-family: 'custom-font';
    src: url('tt0596m0-webfont.eot');
    src: url('tt0596m0-webfont.eot?#iefix') format('embedded-opentype'),
         url('tt0596m0-webfont.woff') format('woff'),
         url('tt0596m0-webfont.ttf') format('truetype'),
         url('tt0596m0-webfont.svg#custom-font') format('svg');
font-weight: normal;
font-style: normal;
}

My understanding is that font-face enables specifying a custom font and a list of fall-backs. However, the aim of my custom font is to deal with record titles including Greek, Russian, Hebrew contractions and I do not want this to be generally applied to Roman script languages (for which Arial is used). Someone advised me to write some client side javascript to read in the title and look for extended Unicode chars or encoded chars. If it finds some, then it updates the CSS class applied. However, I would like to consider different solutions. Is there any alternative solution?

I am not particularly confident with CSS and fonts, so hope my issue has been clearly explained!

Thanks indeed,

I.

Answer 1

In principle, you could do this using the unicode-range property of CSS3 Fonts, like this (playing just with .ttf for simplicity here):

@font-face {
  font-family: customFont;
  src: local(Arial Unicode MS);
}
@font-face {
  font-family: customFont;
  src: url('tt0596m0-webfont.eot');
  src: url('tt0596m0-webfont.eot?#iefix') format('embedded-opentype'),
       url('tt0596m0-webfont.woff') format('woff'),
       url('tt0596m0-webfont.ttf') format('truetype'),
       url('tt0596m0-webfont.svg#custom-font') format('svg');
  unicode-range: U+370-FFFF;
}

This would mean that customFont is effectively a composite font, using your font for characters from U+0370 upwards (e.g., for Greek and Cyrillic) and Arial Unicode for the rest (mainly for Latin letters).

The bad news is, as so often, lack of sufficient browser support. Here Firefox seems to be the main problem: it does not support unicode-range at all.

The approach described in the question would need to be based on ranges of characters, too, because JavaScript lacks built-in tools for inspecting character properties (such as the “Script” property).

If information about the language of each title is available (it often is in well-designed databases), it should be included in the generated HTML document in lang attributes, which you could then use in styling. Or class attributes could be emitted, containing information about script (writing system) properly encoded.

However, from the typographic point of view, I strongly recommend using the same font for all writing systems in a context where comparable items (like record titles) are presented. This especially applies to the “sibling” scripts Greek, Cyrillic, and Latin, which share many character forms. For example, Greek small omicron, Cyrillic small o, and Latin small o should look exactly the same. For more different scripts, the issue is not that serious, but e.g. Latin text in a serif font looks odd when paired with Hebrew text in a sans-serif font.

Answer 2

Jukka Korpela's answer really saved my day. What I wanted to share with those who are interested, is the implementation we've used to enable the cyrillic characters of a custom font, through the above mentioned unicode-range method.

By using the below definition you really dont need to specify any lang attributes etc. What it basically does is define another font file to be used for the unicode-range for Cyrillic characters.

Interesting observation from my side would be that by default all browsers(IE,FF,Safari) load both font files even if there arent any cyrillic characters in the document. Only Chrome loads the additional cyrillic font file on demand. Meaning that it does not load the fonts until an instance of the defined unicode range is encountered.

/*
 CustomFont Latin
 */


@font-face {
    font-family: 'CustomFont Regular';
    src: url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.eot'); /* IE9 */
    src: url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.woff') format('woff'); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
/*
 CustomFont Latin
 */

/*
 CustomFont Cyrillic
 */

@font-face {
    font-family: 'CustomFont Regular';
    src: url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.eot'); /* IE9 */
    src: url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.woff') format('woff'); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0400-04FF;
}

/*
 CustomFont Cyrillic
 */

Some useful reading materials:

developer.mozilla.org - unicode-range

and

Cyrillic script in Unicode