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 Windows:
I only need to support modern browsers so @font-face and google fonts are allowed.
Updated
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.
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.
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: http://www.cs.tut.fi/~jkorpela/html/characters.html