Accepted answer

The symbols appearance depends on the font you use.

Please look at your updated jsfiddle. I've just changed the font on all elements:

* {font-family:serif !important}

Any element can have its own font.
It's up to you which font to use. So choose the right one and tune it up.


I have to clarify several points:

  1. There are NO 'safe' or 'unsafe' fonts.
  2. Basically font works like a key-value storage {code1 => glyph1, code2 => glyph2, ...}, input a code and get the corresponding glyph
  3. Font may or may not contain any code-glyph pair
  4. You can make your own font containing only desired symbols, having codes of your choice associated with glyphs of your choice e.g. \u263d can be any glyph you want, not always the moon
  5. In css font-family: you can specify one or several font-families and/or generic-families (look here). When the style's being applied to the text the browser converts each symbol ('A', ' ' or '\u263d') to its code and tries to get the glyph from the specified font-families until the glyph has been found or no more fonts have left.
    If the font contains the desired code-glyph pair we can see a glyph, if not - we can see a space, ?, an outlined rectangle, a rectangle with the code inside, etc. (depends on the browser).

In this case: {font-family:serif} for \u263d browser searches for the glyph for \u263d in all system fonts of generic-family serif. And on Android it firstly finds what you name the 'emoji'.

The solution is to find (see the jsfiddle) or to make (see the other jsfiddle) a font with the desired glyphs and apply it to the desired elements.

Hope it's helpful and clear.


The answer by Kosh Very has hit on something. Indeed, changing the font-family on all elements to serif does indeed result in the plain symbol being used in highcharts, even in Android 7. The trouble is, in actual use I cannot stick to a single "safe" font family... the font can be specified by the user, from any web font listed on Google fonts.

I've updated the jsfiddle to include loading and use of a web font:

// see
    google: {
      families: ['Fresca:400']

And I use that font throughout, both inside and outside highcharts. The result on Windows Chrome is as before (plain text symbols all over), but now the result in Android 7 Chrome is:

enter image description here

So this now rather suggests that the issue isn't highcharts-specific after all, and more of a font issue as Kosh Very as indicated. Indeed in the original example, without any font stated explicitly, the font used in highcharts is different to that used outside... and probably hence the difference in symbol style.

But I've tried a couple of other completely different web fonts in the updated jsfiddle example, with the same result. In other words, the emoji sun symbol is not apparently coming from the font itself. Perhaps when a font is missing a particular character (these fonts probably don't have a character for every unicode value) then it reverts to using characters from the system font? From other discussions it seems that these coloured emojis might only show on Samsung devices, so maybe the system font on Samsung has these?

The solution (or workaround) seems to be use a "safe font" only where required (for the graphical characters), and your desired font elsewhere, as per this updated jsfiddle, which gives the following result on Android 7 Chrome:

enter image description here

BUT I've hit a snag with this solution... it works nicely for the sun symbol as above, but for the very next unicode character (moon symbol) it doesn't... so maybe that symbol is missing from the serif font family and it reverts again to system emoji.

jsfiddle with moon

enter image description here

So the solution is probably still very patchy... maybe only limited to certain symbols.

Even for a font like Cardo that apparently supports the moon character \u263d, this example doesn't work in Android Chrome... still get the coloured emoji version rather than the plain version.

Related Query

More Query from same tag