emoji variation selector doesn't work for user specified font?

user_691867 0
Viewed 74

Environment: Chrome v97 on Windows 10

enter image description here

It seems the variation selector for emoji is only respected if no font is specified, in which case OS would fallback to the correct glyph.

enter image description here

This is DevTools inspect on the first example (OS fallback). On "Computed" tab it shows the actual glyphs come from both "Segoe UI Emoji" (for emoji presentation) & "Segoe UI Symbol" (for text presentation) correctly.

However if I specify a font explicitly, either both text or both emoji display, depending on the font order. No fallback to the next font in the list even if the glyphs of the other presentation are missing.

This means if I want to change the emoji font on a site, variation selector doesn't seem to work at all.

Why is that? Is there a workaround?

Sample code is attached

<style>
  .emoji {
    font-family: 'Segoe UI Emoji';
  }
  .symbol {
    font-family: 'Segoe UI Symbol';
  }
  .symbol-emoji {
    font-family: 'Segoe UI Symbol', 'Segoe UI Emoji';
  }
  .emoji-symbol {
    font-family: 'Segoe UI Emoji', 'Segoe UI Symbol';
  }
</style>

OS Fallback: <div>&#x2639;&#xFE0E; &#x2639;&#xFE0F;</div>
Emoji: <div class="emoji">&#x2639;&#xFE0E; &#x2639;&#xFE0F;</div>
Symbol: <div class="symbol">&#x2639;&#xFE0E; &#x2639;&#xFE0F;</div>
Symbol emoji: <div class="symbol-emoji">&#x2639;&#xFE0E; &#x2639;&#xFE0F;</div>
Emoji symbol: <div class="emoji-symbol">&#x2639;&#xFE0E; &#x2639;&#xFE0F;</div>
emoji unicode html
1 Answers

The Segoe UI Symbol font doesn't support the variation sequences using U+FE0E, which is why you don't get the text variant in the "Emoji" case. (Segoe UI Symbol does support sequences with U+FE0F, though.)

As for the "Symbol Emoji" and "Emoji Symbol" cases, this is expecting the browser to decide on a font based on the variation sequences. Evidently Chromium doesn't handle that.

user_91373950
Related