Change the handling of "font-family: system-ui"

[Anonymous]

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?

[Jon]

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

[notsidney]

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!