Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent browsers from using default/fallback fonts

I have a web app in which a user can change the font family of an input text area in a WSIWYG-kind style. Now, let's say the user inputs some Chinese text in the text area, but selects a Font that has no support for Chinese characters. In my application, I'd like the user to see those nasty squares (or something like that) that are usually shown when the font doesn't support the character. That way, the user would know that the font doesn't support the language and could choose a different one. The issue I'm having is that the browsers (Firefox 17 and Chrome 23) seem to render the Chinese part of the text with fonts (as Arial) that do support those Chinese characters, making the user believe that the font he's trying to use works fine.

Is there a way (I'm guessing through CSS) to prevent this? Is there a way of making the browsers not to be so "nice" for only this time?

Thank you in advance.

like image 637
BorrajaX Avatar asked Dec 12 '12 17:12

BorrajaX


People also ask

Why is it important to always use fallback fonts?

Therefore, it is very important to always use fallback fonts. This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.

What is the default font used by the browser?

In browsers I use (Chrome, Opera, Firefox) default fonts are: Standard font: Times New Roman, Serif font: Times New Roman, Sans-serif font: Arial, Monospaced or fixed-width: Consolas (Firefox: Courier New).

How do you fix Fout?

The best way to deal with FOUT is to make the transition between the fallback font and web font smooth. To achieve that we need to: Choose a suitable fallback system font that matches the asynchronously loaded font as closely as possible. Adjust the font styles ( font-size , line-height , letter-spacing , etc.)


2 Answers

As the other answer already explained, the solution is to use a fallback font which includes 'all' unicode codepoints. However the difficult part was to find or built one which doesn't weight a few MBs.

A few years later there is now a more lightweight solution for a fallback font, the NotDef font by Adobe. It shows a box with a cross for 1,111,998 Unicode code points, is only about 22Kb and is using the SIL OPEN FONT LICENSE Version 1.1.

If you don't want to show anything there is also the Adobe Blank font.

like image 181
tobltobs Avatar answered Oct 17 '22 12:10

tobltobs


You can intercept the font substitution process by throwing in a catchall font, using some equivalent of font-family: userChoice, yourCatchAll where yourCatchAll is a font that has a generic glyph for all characters.

The problem is in finding such a font. The LastResort font distributed by the Unicode Consortium would be ideal, since it also visually indicates the category of the character in broad terms, but its EULA does not seem to allow modifications. It is debatable whether this applies to the construction of web font formats (like .eot and .woff).

The Unicode BMP Fallback Font appears to have more liberal rules of use, but it displays a character simply as its Unicode number in a box (and supports only Basic Multilingual Plane, though it contains all characters that most people ever heard of).

like image 8
Jukka K. Korpela Avatar answered Oct 17 '22 12:10

Jukka K. Korpela