Search code examples
htmlcssfontswebfonts

Why does the display of a glyph depends on the browser?

The context

I wrote a home dashboard which, among others, provides a visual indication of the likelihood of rain in the next hour. If rain is expected, the 💧 symbol is displayed (with Open Sans), otherwise it is styled with filter: opacity(10%);.

In terms of code (HTML, CSS, Vue.js), it is displayed via

<span class="drop" :class="isDrop(horaires.first.rain, 2)">💧</span>

The dynamic class is calculated by 

isDrop(rain, level) {
  return rain >= level ? "full" : "empty"
}

and the class empty is 

.empty {
  filter: opacity(10%);
}

(the class full is not defined yet)

The problem

The drops look significantly different on my development environment (Windows 10, Chrome or Firefox)

enter image description here

and the actual dashboard (Raspberry Pi with Debian, Firefox)

enter image description here

Where does this discrepancy may come from?

  • the source of the page is the same in both cases
  • the font used on the page is explicitly loaded via @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
  • not only the filtered version is different (visoble in one case, invisible in the other) but even the non-styled drop looks different - despite being rendered with the same font.
Solution

  • That is because the font you use (Google Open Sans) doesn't include all the unicode glyphs, and more importantly for you, it doesn't include emojis.

    So when the browser encounter these glyphs, it will fallback to one available on the system, and different browsers may use different order for choosing which font to use and you may indeed have different font used to represent the same glyph even on the same computer. However, you may be almost sure that different OS will have different fonts, and thus different rendering for these glyphs. Most modern browser's dev-tools allow you to verify which font are being used, check it to be sure which one are toggled on your system.

    The solution is to use a web-font which does include these glyphs.

    Google has a Noto font which does handle only emojis, Noto Emoji, but the color version is 8MB for only these emoji glyphs!. Saying this so that you understand it's not an easy thing to include these glyphs in any web-font.
    There are other web-fonts that seem to exist, but all the free ones I can see are monochrome, so here I'll use Google's one for the example. 

    @font-face {
  font-family: "NotoEmoji-Regular";
  src: url("https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji/fonts/NotoEmoji-Regular.ttf") format("truetype");
}
body {
  font-family: "NotoEmoji-Regular";
}
    💧

    If you only have a small set of these emojis you'll use, you could probably make a fork of Google's one or of an other open font so it includes only the ones you need (and be lighter).
    Or alternatively, if you have a good designer, you could make your own set of emojis and use a service like icomoon et al. to make your own font based on svg graphics.