How can I ensure a Unicode character is displayed correctly at all times?

Question

For instance, the below will sometime appear as a square and a letter u, respectively. How can I avoid inconsistencies?

content: "\E07A"; // Shopping cart icon
content: "\1F50E"; // Search icon

By inconsistencies I mean displaying inconsistently on the same machine and same browser. Sometimes it loads correctly, and sometimes it doesn't.

You must provide a webfont: you cannot rely on users to have a font which cover most Unicode characters: OS (especially old mobile OS) may lack of many fonts. — Giacomo Catenazzi, Oct 19 '21 at 12:02
You need https://stackoverflow.com/help/minimal-reproducible-example — tromgy, Oct 19 '21 at 12:16
@tromgy this is as reproducible as it gets... I had no problem reproducing the inconsistent behaviour. — Mr. Hugo, Oct 19 '21 at 12:41
Thanks @GiacomoCatenazzi Yes. Web font is provided and it works. The problem is it doesn't display correctly every single time. — FlyingPenguin, Oct 19 '21 at 14:22

score 0 · Accepted Answer · edited Jan 07 '22 at 13:40

0

When you load a font with that glyph in it (through @font-face), it will work consistently. When you don't, you are dependent of the fonts on the machine of the user. In that case you can better replace these 'icons' with SVG images, like this:

content:url('cart.svg');

edited Jan 07 '22 at 13:40

Peter Mortensen

30,738
21
105
131

answered Oct 19 '21 at 12:39

Mr. Hugo

11,887
3
42
60

Thanks JoostS. It displays inconsistently on the same machine and same browser. I agree replacing it with .svg is a safer bet. Thank you! – FlyingPenguin Oct 19 '21 at 14:19
1

Then the page is probably (sometimes) not interpreted as UTF-8. But yeah... go for the SVG. It is much safer. – Mr. Hugo Oct 19 '21 at 16:03

How can I ensure a Unicode character is displayed correctly at all times?

1 Answers1