Showing results for 
Show  only  | Search instead for 
Did you mean: 
Not applicable
Status: New idea

There are many websites that shallowly specify font-family: system-ui in CSS. For systems that do not allow a choose system font, this may degrade the user's experience. In about:config it can be disabled by layout.css.system-ui.enabled. Could the default value be set to false or changed in about:preferences?

Status changed to: New idea
Community Manager
Community Manager

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

New member

Hey there, thanks to you pointing out that flag, I was able to figure it out. You can change system-ui by:

  1. Setting layout.css.system-ui.enabled to false.
  2. In your userContent.css file, add the following declaration:


@font-face {
	font-family: system-ui;
	src: local("SF Pro");
	font-weight: 100 1000;
	font-style: normal;
@font-face {
	font-family: system-ui;
	src: local("SF Pro Italic");
	font-weight: 100 1000;
	font-style: italic;

Replace SF Pro with your font family of choice. Note this snippet is for a variable font with a separate file for italics.


I've had this in my userContent.css for a while but it ignored those rules unless if the flag is false.

Hope this helps!