Overriding font-family via userContent.css doesn't work

Question

I'm trying to override font-family via userContent.css in all web pages. My ultimate goal is to only target Persian/Arabic text in the css but that's a separate issue.

I started with a simple global rule below but Firefox does not pick it up:

* { 
    font-family: "Vazirmatn" !important; 
}

I noticed the changes are picked in firefox's chrome, for instance the text in the Inspector but not in actual websites. I added below to target content of websites but it wasn't effective:

@-moz-document url-prefix('http://'), url-prefix('https://') {
    * { 
        font-family: "Vazirmatn" !important; 
    }
}

Am I missing something?

Some sanity checks:

• toolkit.legacyUserProfileCustomizations.stylesheets is set to True
• the same CSS works if I use the Stylish extension but I prefer to use the native userContent.css if possible
• "Allow pages to choose their own fonts, instead of your selections above" is set to True in settings
• I'm on Firefox 106.0.2