0

I have a html page where I want to use playing card symbols. My minimal example

<html>
<head>
  <meta charset="utf-8" />
</head>

<body>
  &#127137;
</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?

snakecharmerb
  • 47,570
  • 11
  • 100
  • 153
cssdev
  • 59
  • 7
  • 1
    Possibly the character isn't supported by the default font. – snakecharmerb Sep 23 '21 at 09:57
  • Does this answer your question? [The same font displaying different symbols in desktop Firefox and mobile Firefox](https://stackoverflow.com/questions/69316620/the-same-font-displaying-different-symbols-in-desktop-firefox-and-mobile-firefox) – Chris W. Sep 24 '21 at 18:48

1 Answers1

1

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-family as a fallback font for the special characters. I recommend reading more about Fallback fonts on special characters

Jelle
  • 758
  • 2
  • 14
  • 36
  • Thanks for your anser, @Jelle! I initially accepted it but after investigating some more, I'm not sure if it is as straightforward as this. It seems like _the same font_ behaves differently on mobile and desktop. I updated the question to reflect this. – cssdev Sep 23 '21 at 15:08