google / google/fonts

Some ZWJ Noto Color Emojis don't display correctly with the 12 font packs/unicode-range

Open
#9,729 3 comments 0 reactions 0 assignees View on GitHub
I Font Bug
Dominant language
HTML
Stars
20.5k
Forks
2.9k
Avg merge
1d 22h
Merged PRs (30d)
96

Description

Some emojis that use ZWJ do not render correct when using the default google fonts [stylesheet](https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap) that serves 12 font files using `unicode-range`.

**Describe the bug**

Font works correctly when downloading the complete ttf file. It does not work using the stylesheet which sources 12 different files based on `unicode-range`.
```CSS
...
@font-face {
font-family: 'Noto Color Emoji';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/notocoloremoji/v35/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.8.woff2) format('woff2');
unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5;
}
@font-face {
font-family: 'Noto Color Emoji';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/notocoloremoji/v35/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2) format('woff2');
unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}
...
```

**To Reproduce**

1. Create a HTML page with ZWJ emojis such as 🧑‍💻 (U+1F9D1 U+200D U+1F4BB)
2. Paste the stylesheet link ``

**Expected behavior**

Expected to see a single glyph made from the components

**Screenshots**

This is the "People" preview on the [font page](https://fonts.google.com/noto/specimen/Noto+Color+Emoji/glyphs?query=emoj).
Image

**Additional context**

The entire TTF font from [source](https://github.com/googlefonts/noto-emoji/blob/main/fonts/NotoColorEmoji.ttf) and the bundled version in this repo works as expected. Only the split files do not work.

Blocking pack 10 makes the stylesheet work as expected. This pack adds 🧑‍🦼 (U+1F9D1 U+200D U+1F9BC) which renders correctly but the mention of U+1F9D1 in the `unicode-range` is likely making the browser use pack 10 to render 🧑‍💻 instead of pack 8.

Perhaps packs need to be chosen such that there are no overlaps in unicode range.

Contributor guide

Open the contributing guide

Research direction

Start with the Google Fonts stylesheet link and compare its 12 font-pack unicode ranges with the bundled NotoColorEmoji.ttf from the linked noto-emoji source. Reproduce the issue using 🧑‍💻 and compare it with the complete TTF and with pack 10 blocked. Done means ZWJ emojis render as one glyph when using the split stylesheet.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.