CSS `system-ui` underlying font family in Linux browsers

Thammachart Chinvarapon — Fri, 08 May 2020 10:27:18 +0000

As of 2021-09-16, looks like Chromium-based and Firebase-based Browsers are now using config in gsettings

$ gsettings set org.gnome.desktop.interface font-name '<FONT> <SIZE>'

Don't forget to replace <FONT> and <SIZE> to your liking

or you can use GNOME Tweak Tools GUI > Fonts > Interface Text

This is for earlier version of Chromium and Firefox

Resolving CSS system-ui font-family varies across different browsers in Linux

Chromium

Chromium-based browsers use GTK 3 Setting

edit gtk-font-name in GTK 3 Setting files, e.g., ~/.config/gtk-3.0/settings.ini
or, use Configuration Tools to set GTK 3 default font like GNOME Tweak or lxappearance

More Information: https://wiki.archlinux.org/index.php/GTK

Firefox

Firefox-based browsers use freetype fontconfig generic family named system-ui

First, create XML file with name like 60-system-ui.conf with content:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
 <alias>
    <family>system-ui</family>
    <prefer>
      <!-- change the family tag contents below to your liking -->
      <family>Ubuntu</family>
      <family>Inter</family>
      <family>Cantarell</family>
      <family>Liberation Sans</family>
      <family>DejaVu Sans</family>
      <!-- you can add more family tags, if you like -->
    </prefer>
  </alias>
</fontconfig>

Then, save it to:

~/.config/fontconfig/conf.d/ to apply user-wide
or, /etc/fontconfig/conf.d/ to apply system-wide

More Information: https://wiki.archlinux.org/index.php/Font_configuration#Replace_or_set_default_fonts

After changing, don't forget to restart the browsers to see the effect!

To test CSS system-ui font-family: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

DEV Community: Thammachart Chinvarapon

CSS `system-ui` underlying font family in Linux browsers

Chromium

Firefox