How to use unicode chars in a web with a reliable rendering

Go To


I'm using unicode symbols in a web as graphic components.

I need to trust in the way this unicode characters are rendered.

Here there is a simplified example of what I'm trying to build.

You can see that the unicode characters are rendering different in different computers.

Chrome under OSX: Chrome under OSX

Chrome under Windows: Chrome under Windows

I only need to support modern browsers so @font-face and google fonts are allowed.


I know the problem is that the chosen font has not the special characters and finding one with them and compatible with @font-face or googlefonts will be the solution but this is the real problem: how to find a font with this characteristics.

2012-04-03 19:48
by fguillen


The most likely answer is that your selected font has no glyphs defined for those unicode code-points (and from perusing the font, that seems to be the case) and you will need to switch to a font that has glyphs defined for those code-points.

When a font has no defined glyph for a Unicode code-point, it's up to the platform to figure out how to handle it. Windows used to simply show a square box for anything that wasn't defined, but since Windows Vista (or maybe Windows 7), it will now display a glyph from the system default font, if that's available. What you are most likely seeing for your unicode characters are the versions from the system default fonts - which, of course, are not the same on Windows and Mac.

2012-04-04 01:44
by Michael Mullany
+1 for the explanation, the solution will be to find a font with the glyphs but this is the real issue : - fguillen 2012-04-04 07:56
It's a much better idea to use a symbols web font rather than hoping your favorite font has these characters defined. has a bunch of symbol font - Michael Mullany 2012-04-04 16:39


You should try and find a font that a) contains all the characters you need, b) can be legally used as a downloadable font via @font-face.

You are now using the Fedoka One font, but it contains a very limited character repertoire. The first four characters that you are trying to show are not there (not even “⋕”, since it is quite distinct from the Ascii character “#” despite visual similarity). Since the font-family rule next specifies fantasy, browsers will try whatever fancy font they have been set to use as a generic fantasy font, and it probably hasn’t got them either—fantasy fonts tend to have a limited repertoire. Browsers then go their own ways, possibly using various fonts.

Those four characters are rare in fonts, and the fonts containing them have no similarity with Fedoka One in style. So you may need to reconsider the approach.

Some notes on using special characters in HTML:

2012-04-04 03:07
by Jukka K. Korpela
+1 for the explanation and the interesting link, but how I said to @Michael the problem remains due the real issue is how to find a font with this characters - fguillen 2012-04-04 08:01