@font-face doesn't work with Shadow DOM?

[wbamberg]

Related to #881: the input examples generally use .output to set the font to one that we loaded using @font-face. But changing this seems to indicate that the custom font specified using @font-face isn't being loaded any more.

For example, in https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-file.html, changing

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

to

legend, label {
    font: 1rem 'Fira Sans', sans-serif;
}

... you can see that the rules are having an effect, but 'Fira Sans' is not being used.

This is in both Firefox(with the shadow DOM pref on) and Chrome.

[wbamberg]

Weirdly this seems to work in production: https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-email.html, just not in the local testing server.

[schalkneethling]

Acceptance Criteria

Custom font faces are loaded and applied both locally and in production