I use Google's Noto Emoji font on my website to display emoji in a single color. It's been working fine for months but recently, in non-Chrome browsers, many of the emoji either stopped rendering entirely, or didn't use this font – they appear as regular emoji.
This only happens in Safari and Firefox (I'm using macOS). Each fails in a different way, but the way each fails is consistent across reloads. And with Safari, it's also consistent between macOS and iOS.
I have a test page with all the emoji, divided up by how many characters they use – because the number of characters seems to affect the result.
It starts like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Emoji test</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@700&display=block" rel="stylesheet" />
<style>
p {
font-family: "Noto Emoji", sans-serif;
color: #0f0;
}
</style>
</head>
And then each block of characters is a paragraph of emoji:
<p> ♒ ♈ ... </p>
Here's the left-hand side of the page in each of three browsers – emoji that are rendered using the Noto Emoji font are in bright green:
I'm stumped as to what's happening here – why does Chrome always work perfectly? Why do some emoji in Safari fail to display at all and some fail to use the font? Why does Firefox fail differently, but also consistently differently?