DEV Community

Thammachart Chinvarapon
Thammachart Chinvarapon

Posted on • Edited on

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

#linux

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>'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
phihag profile image
Philipp Hagemeister • • Edited

At least on debian sid with lxde, I do not see any changes in gsettings reflected in Chromium.

Instead, the change comes from fontconfig, the font being used can be queried with the command fc-match (no arguments)

Collapse
 
blahgeek profile image
Yikai Zhao •

It seems that starting from firefox 92, it also uses the GTK3 settings just like chrome.

Collapse
 
thammachart profile image
Thammachart Chinvarapon •

Interesting, now both Chromium-based and Firebase-based Browsers now using gsettings with schema org.gnome.desktop.interface and path font-name, not the ini file, as system-ui font. Will update soon.