Create custom font families with Fontconfig

Question

I'm starting to dive into using sway + waybar. For styling my Waybar, my ultimate goal is to be able to have it use monochrome emoji and prevent color emoji from appearing. However, I want to have color emoji everywhere else on my system, so disabling color emojis system-wide is non-ideal. Any way I can achieve this goal is fine, maybe it's not necessarily a Fontconfig solution.

My current thought process was to create a "custom font family" in Fontconfig specifically for Waybar to use, and then make sure this custom font family doesn't try to use color emojis. If successful, I could see myself using this pattern in a few other places across my system as well.

So, in my ~/.config/fontconfig/fonts.conf, I have the following match element:

<match>
  <test name="family"><string>Waybar Font</string></test>
  <edit name="family" mode="delete_all"></edit>
  <edit name="family" mode="prepend_first" binding="strong">
    <string>Noto Sans</string>
    <string>Noto Sans Symbols</string>
    <string>Noto Sans Symbols 2</string>
  </edit>
</match>

When I fc-cache -fv && fc-match "Waybar Font" -s | head -n 10, I get:

NotoSans-Regular.ttf: "Noto Sans" "Regular"
NotoSans-Italic.ttf: "Noto Sans" "Italic"
NotoSansSymbols-Regular.ttf: "Noto Sans Symbols" "Regular"
NotoSansSymbols2-Regular.ttf: "Noto Sans Symbols 2" "Regular"
NotoNastaliqUrdu-Regular.ttf: "Noto Nastaliq Urdu" "Regular"
NotoSansWarangCiti-Regular.ttf: "Noto Sans Warang Citi" "Regular"
NotoSansAdlam-Regular.ttf: "Noto Sans Adlam" "Regular"
NotoSansDuployan-Regular.ttf: "Noto Sans Duployan" "Regular"
NotoSansSyriacEastern-Regular.ttf: "Noto Sans Syriac Eastern" "Regular"
NotoSansMath-Regular.ttf: "Noto Sans Math" "Regular"

(there are 177 lines of output, which I'm surprised by since I tried to delete_all, but I figure adding Noto Sans probably adds a bunch of fonts...?)

Waybar's stylesheet uses this Waybar Font:

* {
    font-family: "Waybar Font";
    font-size: 13px;
}

(no other font-family directives anywhere else)

However, when I reload Waybar, it seems to still use the Noto Color Emoji version for :

AFAICT, the first font that contains this glyph (given the above output) is NotoSansSymbols2-Regular.ttf, and it should look like this (see Glyphs):

Am I misunderstanding how Fontconfig works? Is it possible to do what I'm attempting to do?

Answer 1

Upon searching more, it seems like this blog post has some relevant information. Copying relevant info here:

• , by itself, is a generic "speaker with three sound waves". It might be rendered either with color emoji or with text, depending on your system setup.
• ️ is the first character plus an additional U+FE0F codepoint appended to it. U+FE0F is a "variation selector", in this case specifying to render the color emoji variant.
• ︎ is the first character plus an additional U+FE0E codepoint appended to it. U+FE0E is another variation selector, this time specifying to render the text variant.

(copy-paste each of these into https://unicode-explorer.com/search/, you'll see that they're using different unicode encodings)

In the Waybar configs, you can append ️ or ︎ (respectively) to your emoji to force one rendering or another, assuming you have the "base" codepoint before it. Eg. ︎ will render ︎. Alternatively, you can just copy-paste the complete "forced" version into your configs now that you know there's a difference. :)

I'm still interested if there's a way to "force text-based emojis for custom fonts" in Fontconfig, though.