[Feature]: Include an emoji font along with other default font options.

[mmwaikar]

General Summary

Why? Because I want to display the flag of the country to which a (CCE) center / institute belongs.

Description

Right now, I have this in my options.json -

"siteMappings": {
    "cce-dkfz-nct": "🇩🇪 German Cancer Research Center",
    "cce-gr": "🇫🇷 Gustave Roussy",
    "cce-ki": "🇸🇪 Karolinska Institutet",
    "cce-nki": "🇳🇱 Netherlands Cancer Institute",
    "cce-vhio": "🇪🇸 Vall d'Hebron Institute of Oncology",
    "cce-cruk-cc": "🇬🇧 Cancer Research UK Cambridge Center"
  }

Unfortunately, the flags are shown above instead of the strings DE, FR, ... as a prefix / label to the center name (which are the Unicode “regional indicator” character as a flag glyph).

The problem

It works nicely in Firefox, but Chrome does not show the flags. I have tried to add this in my app.css but it hasn't worked so far.

@font-face {
  font-family: "Noto Color Emoji";
  src: url("../fonts/Noto_Color_Emoji/NotoColorEmoji-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+1F300-1F9FF, U+1F000-1F64F, U+1F680-1F6FF, U+1F1E0-1F1FF, U+2600-27BF,
    U+2300-23FF, U+2000-206F, U+3000-303F, U+0020-007E, U+0080-00FF,
    U+0100-017F, U+0180-024F, U+0250-02AF, U+2070-209F, U+20A0-20CF,
    U+20D0-20FF, U+2100-214F, U+2150-218F, U+2190-27FF, U+2900-297F,
    U+2B00-2BFF, U+1F900-1F9FF;
}

Outcome

Flags should render in any browser by just including their Unicode “regional indicator”.

Is this Breaking?

No