homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Font stack covering multiple unnicode ranges
Will the all browsers use the first font that contains the glyph

 5:51 pm on Feb 24, 2013 (gmt 0)

I want to do something like

font-family: font1, font2, font3

fonts 1 and 2 cover the common stuff, 3 an alphabet not covered by 1 and 2.

Given a latin glyph it will use 1 if available, if not it will use 2.

Given a glyph from the other alphabet I want it to use 3. Will all browsers do this or will some try to fallback to something else?



 6:55 pm on Feb 24, 2013 (gmt 0)

as i know font-family is supported by IE, OPERA and FF.. Google chrome should support it also..


 2:47 am on Feb 25, 2013 (gmt 0)

The issue isn't font-family as such; it's font naming. Some very, very old versions of MSIE don't recognize it. And some not-quite-so-old versions of MSIE don't do Font Substitution, which is a far more serious problem.

You forgot font4, which will be either "serif" or "sans-serif". You need this because if the user doesn't have font3 installed, no two browsers use the same rules when they have to deploy Font Substitution. Opera for example seems to work in strict alphabetical order. (In my case this tends to mean AlphabetumDemo with the overlay because I keep forgetting to pay for it ;))

This kind of thing can be changed in browser prefs-- with the bizarre exception of Safari, in spite of being the font-friendliest browser around-- but very few users will have done this. Unless your target audience consists largely of people with the kind of linguistic background that means they will venture into the prefs.


 7:39 am on Feb 26, 2013 (gmt 0)

Yes, take having font4 as read.

IN more detail, the plan so far is to have something like this:

font-family: Helvetica, Arial, sinhalafont, sans-serif;

The Sinhala font is going to be embedded with @font-face because I cannot count on visitors having a Sinhala font installed at all.

Assuming that the sinhala font contains no latin letters, and the other fonts contain no sinhala then, can I assume.

1) Latin text will be displayed using Helvetica if available, otherwise arial, failing which the default sans-serif font.

2) sinhala text will be reliably displayed using the sinhala font.

Supporting IE 6 and similar horrors is not a priority.

Of course, all this depends on finding a sinhala font I can redistribute (and preferably remove the basic latin most of them contain). So far I cannot find helpful license information on any, but that is another issue.


 8:42 pm on Feb 26, 2013 (gmt 0)

and preferably remove the basic latin most of them contain

I looked and looked and finally had to cave in and get FontForge, which as the name implies has to be --ugh!-- installed manually --ugh!-- using Terminal --ugh!-- But due to some oversight, I only had to type about two things and it worked on the first attempt. And, once installed, it's got a proper GUI the way God intended.

Like you, I needed a font wrangler so I could strip down an embedded font to only those characters that would actually occur. In my case I was using it for a decorative header so that means [A-Za-z] plus some basic punctuation. Oh, and then I had to fix the size. We're talking third-party font dating from 1991 here ;)

In your case the "stripping-down" detail would make a big difference because if you don't edit your Sinhala font, and if your users have neither Arial nor Helvetica (= they're on Linux*), then that's where their system will get the sans-serif characters. Matter of fact, I've got a page that says so ;) I thought this all sounded familiar!

:: further investigating ::

Drat. I was going to suggest adding DejaVu Sans, which is ubiquitous on Linux and common on Windows (they say nonexistent on Mac but that's a barefaced lie because I've got it), but I remembered wrong. It doesn't cover Sinhala.

According to FontBook, Arial says
You may use this font to display and print content as permitted by the license terms for the product in which this font is included. You may only (i) embed this font in content as permitted by the embedding restrictions included in this font
{ (ii) is about printing }

= You are only allowed to do the things you are allowed to do.

If you use a font that's downloadable free-- that is, ahem, from the source, not from a scraper site --then you can pretty well assume embedding is OK, can't you? Especially if it's embedded in a form that makes it unusable as a free-standing font. (The preceding paragraph will come as a great surprise to Tiro Typeworks w/r/t to the Pigiarniq font, but their copyright blurb suggests they're pretty well delusional anyway.) All fonts contain an "embeddable" flag, but unfortunately this seems to refer to pdf embedding, which is a completely different issue since it doesn't create a free-standing .ttf file.

* The font-stack area of codestyle dot org says 99.9% of Windows users and 98.89% of Mac users have Arial-- and 100% of Mac users have Helvetica. But a hair over 30% of Linux users have neither.


 8:24 am on Feb 28, 2013 (gmt 0)

On Linux (mainstreams distributions at least) Font Forge is in the repositories (i.e. app store equivalent) and installed while I typed this.

I have read a page on your site. The one on font substitution and naming. Its informative but does not cover anything. To clarify, font substitution is used if none of the fonts in a CSS font stack (bar the generic serif/sans) contain the characters?

I did not know common windows/mac fonts covered Sinhala. I am pretty sure older versions of these fonts do not (Windows XP includes Arial by default but does not support Sinhala out of the box) so I am going to need an embedded font.

Linux users should be OK, at least with a fallaback font, as I am sure that the number of Sinhala reading Linux users who do not have a Sinhala font installed is going to be very small. Incidentally DejaVu Sans does not cover sinhala.

I am now thinking of something like:

sinhalafont, Helvetica, Arial, sans-serif;

Where I have removed everything but sinhala characters from the sinhala font.

The alternative is to not embed a font and stick to fonts that include sinhala, but with the need to support XP users that does not seem an option.

Licensing is probably OK. Some fonts I downloaded from a government agency (which is the copyright holder) do not contain any terms, but I doubt they will object to my embedding them.

Supporting multiple scripts is much harder than I expected. Everything is unicode all the way so it ought to be smooth, but getting it right in the browser is going to have me tearing my hair out.


 11:08 am on Feb 28, 2013 (gmt 0)

@lucy comment on your page should be "it does not cover everything" not "anything"


 11:35 am on Feb 28, 2013 (gmt 0)

Font substitution is-- or should be-- used whenever the current font doesn't contain the required glyph. That is, it is better to display the right character in the wrong font than to display an empty box in the right font :) This is independent of how the primary font was selected in the first place-- whether it's the browser default or specified by font naming.

But embedded fonts can only be used if they are requested by name. This may of course change in the future but right now you can't rely on the browser to say "Oh, cool, I've got KandyUnicode so let me just grab the characters from that when I need them". I remember having to wrangle with this when I first had the iPad, because iOS 4 didn't come with Euphemia. (It was added in 5, though you still can't type UCAS.) If I urgently needed to look up a conjugation in the night, I had to seek out my specially made page with embedded Pigiarniq.

Hm, come to think of it, pity you can't use the <embed> tag with fonts the way you do with sound files. "Here it is, it's available when you need it."

I did not know common windows/mac fonts covered Sinhala.

They don't. On my system I've got seven fonts that contain the Sinhala range-- eight if you count unifont-- and none of them are full-spectrum fonts. In fact ::cough-cough:: they are all datestamped August 2011, suggesting I downloaded them in a single binge. Even Code2000 doesn't have Sinhala, and it's got everything else under the sun. Seems to be my only source for Malayalam, f'rinstance.

Its informative but does not cover anything.

Oh, dear. Sounds like it's due for an overhaul then. This page began life as a couple of posts in a different forum, having to do with displaying unusual characters in e-books. You can probably see some of the splices as I change target audiences in midstream.

[I was typing so did not see your add-on ;)]


 2:22 pm on Feb 28, 2013 (gmt 0)

I misunderstood you regarding the windows and mac fonts.

Windows and MacOS do come with Sinhala fonts now, but Android does not, and there are lots of WIndows XP users - most of whom have probably not installed a Sinhala font.

But embedded fonts can only be used if they are requested by name.

They are named in my font stack, so it ought to be OK. Right?

Even Code2000 doesn't have Sinhala, and it's got everything else under the sun.

I suspect its because Sinhala unicode is not much used. Sinhala unicode took a while to develop. A bit of Googling revealed that a Sinhala unicode standard was not released until 1998 (after Klingon, although that remains unofficial and in a private use block!). There were still people arguing about whether it had been done right three or four years ago.

There is also still very little Sinhala content around, and some of it uses non-unicode (sometimes unofficial) encodings. For informal use (Forums, Facebook etc.) it is common to transliterate to Latin (despite the existence of multiple input methods for Sinhala), which I think is ugly :(.

they are all datestamped August 2011, suggesting I downloaded them in a single binge

Was that the last time I brought up Sinhala on WW?

Thanks for all your help. As far as I can see, @font-face embedding a Sinhala font, and putting it it in my font stack ought to work fine. Any reason I may be wrong?

Thanks for all your help.

If you do update your pages to include more on how browsers handle unicode, I am sure I am not the only one who will find it useful.


 12:15 am on Mar 1, 2013 (gmt 0)

Windows and MacOS do come with Sinhala fonts now

Well, ###. You have now come up with the only reason on the planet that would make me consider moving to an OS that doesn't permit Rosetta ;)

Although even then, there must be something you can do with a third-party emulator right?

Wonder if 10.7 or 8 speak Bengali? I always thought it bizarre that they can do Devanagari (also Gujarati, Punjabi etc) but not Bengali although the scripts work identically, they're just slightly different letterforms.


 6:46 am on Mar 1, 2013 (gmt 0)

What are you running on Roseatta? Its a PowerPC emulator?

You could run an older version of MacOS in a VM. I run Windows on a Linux host that way occasionally to test a site in IE.

A quick Google found Unicode fonts and input methods for Windows, Mac and Linux for Bengali. Is there more to it than that?

How did you get interested in such a wide range of languages? Canadian aboriginal to Bengali is a long way. I had another look at your website in case it answered this, and the result was I am now confused about your name as well.


 9:18 am on Mar 1, 2013 (gmt 0)

As of OS 10.6 the Mac doesn't fully support Bengali. Matter of fact, detour to Character Viewer tells me that 10.6 didn't even come with Bengali fonts (they would be in the Optional package, which was not optional in my case ;)). The ones I've got are Alphabetum and Code2000, both third party.

But full rendering support is the bigger issue. As you know-- or I assume you know, since Sinhala may not look like Devanagari but it's genetically related --there are quirks involving consonant clusters, particuarly with -r-, and also the special nature of short "i". To say nothing of the vowels themselves. (Further detour to Character Viewer turns up a bunch of dotted circles with "kombu" in the name. I thought a kombu was a kind of soup, but I guess I was mistaken.) Cursory googling suggests that support was added in .7 or .8.

How did you get interested in such a wide range of languages?

I'm a font junkie. That's all. And a language junkie.

Do sing out if you ever trip across a utility that converts Mac OSX keyboard layouts into a format Windows can use. I can make Mac keyboards standing on my head, but the Windows folks tend to be left out in the cold. (Linux users can generally take care of themselves. That's a description, not an opinion.)


 12:15 pm on Mar 5, 2013 (gmt 0)

My Sinhala is not very good! I think constant clusters are things like "sri" written as a single letter with modifiers added. That can be rendered, but I do not know how to input it (the input methods I have leave out the zero width joiner it requires). I think others do: I need to check with someone more knowledgeable.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved