I have a html page where I want to use playing card symbols. My minimal example
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
🂡
</body>
</html>
displays the Ace of Spades in Firefox (92.0) on my desktop PC (Ubuntu 20.04) but an empty black box in Firefox (92.1.1) on my mobile device (Android 7.0). What's the problem here?
/edit: I learned USB debugging of my mobile and used it to investigate some more. The font used by mobile Firefox is Roboto. The confusing thing is that if I use
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body { font-family: 'Roboto'; }
to use this font on my desktop PC as well, I still get the same behavior: the correct symbols in the desktop version and empty boxes in the mobile version. So strangley, it seems the same font behaves differently on mobile vs on desktop. Any ideas?
The problem is that the Unicode character for Ace of Spades is not supported by the default font in the browser of your mobile device. You can add a
font-familyas a fallback font for the special characters. I recommend reading more about Fallback fonts on special characters