Skip to content
This repository was archived by the owner on Oct 17, 2025. It is now read-only.
This repository was archived by the owner on Oct 17, 2025. It is now read-only.

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

@wbamberg

Description

@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.

Metadata

Metadata

Labels

bugIndicates an unexpected problem or unintended behavior.p2We want to address this but may have other higher priority items.

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions