Web-safe method of setting fonts for special characters

1
votes

There is a website, which will contain a lot of text snippets of exotic languages. They will require several special Unicode characters.

I need a method that guarantees that every special characters are displayed correctly in every main browsers in every main operating systems.

If I use a standard web-safe pattern, like "'Times New Roman', Times, serif;", is it possible that a special character will look different in a different machine?

Edit: I don't actually need to use all of the Unicode characters. A smaller, but widely supported subset with as much special letters as possible will also do it, if they are safe to use.

Edit2: What I want to achive is a method with wich I can specify (and use) as many special characters as possible, wich are rendered correctly in all mainstream browsers and operating systems to prevent a situation when a text in an exotic language is full of question marks, or incorrectly rendered charecters.

3
cssunicodeutf-8special-characters
I removed my answer because I totally misunderstood the question. I'm unsure about browser support, but I'm sure it doesn't depend on what font you choose. Browsers ignore fonts for special characters all the time. – Álvaro González
How do they render them? When I say special characters I mean special letters in exotic languages. – mimrock
If the selected font doesn't have a char for, e.g, €, the browser will either display the character with some hard-coded substitute font or will display the Unicode Character 'REPLACEMENT CHARACTER' (U+FFFD) instead. I will not render it incorrectly (unless it's a really crappy browser). – Álvaro González
That's what I want to avoid. If I can't guarantee that € is displayed correctly everywhere, then I can't use this character. – mimrock

3 Answers

3
votes

You will need a downloadable font (web font), or maybe several such fonts, using @font-face. Properly used, this technique is now supported by virtually all relevant browsers. The difficult part is to decide on the font(s), and the specific solution depends on the repertoire of characters needed. For general information and some hints, see my Guide to using special characters in HTML.

“Web-safe fonts” aren’t. It is true that most systems have a font called Times New Roman, though its character repertoire varies and e.g. Androids haven’t got it. But Times New Roman is rather insufficient in character coverage.

1
votes

It'd be impossible, or at least very very difficult, to make any two symbols render perfectly by-the-pixel. To take a simple example, between OSX and Windows you're going to find a big differences in font weight for any given font. But it seems your concern is only avoiding the character being replaced with another one entirely. For instance, unsupported characters being replaced with question marks or boxes.

If this is true, the first step would be finding a font that has all the characters you want. If that font happens to be a 'web safe font'—which is to say, a font that comes standard with most common OS's—well, then go ahead and use it.

If that font happens to not be a web-safe font, @font-face it. This allows any browser that supports @font-face to display whatever font you reference.

Note that you'll need to be aware of the font's license if you plan to do this. You don't want to go around @font-facing a locally-hosted Proxima Nova.

And on the subject of support, @font-face has remarkable browser support. Here's a good article on @font-face cross-browser support.

Of course, this is just the method of how to implement a cross-browser solution. If you meant to ask was 'How can I do this, and what font should I use?' well...that's a different question!

1
votes

For exotic languages? You cannot guarantee it, because many users don't have support for exotic languages on their system. Even if you use @font-face, standard American or European Windows computers won't correctly display Arabic or certain other languages because of the lack of this support, which is more than just the lack of a font.

Look at the Wikipedia articles for Korea, Saudi Arabia, China or the like - they all come with a warning box "This article contains [language] characters. Without proper rendering support, you may see question marks, boxes, or other symbols". If it was possible to solve, they would have solved it.

So your only options are to use images for text in exotic languages - this is what Omniglot does, see e. g. http://www.omniglot.com/writing/akkadian.htm - or to display a text like Wikipedia does, along with a link teaching people how to activate support for these languages.