How to apply the CSS property 'font-display' globally?

Question

I want to make a user style sheet as a Chrome extension, which will override the default font-display CSS property with font-display: swap for any @font-face rule. It should work on any web page, regardless of the way of loading web fonts (<link rel="stylesheet">, @import, inline @font-face). How can I do that?

Answer 1

One way is to use JavaScript in order to enumerate all @font-face rules in a content script:

[].slice.call(document.styleSheets).forEach(function (sheet) {
    [].slice.call(sheet.cssRules || []).forEach(function (rule) {
        if (rule.type === CSSRule.FONT_FACE_RULE) rule.style.fontDisplay = 'swap';
    });
});

Does anybody know the CSS-only way?