@font-face in CSS should be scoped in synthetic shadow

[nolanlawson]

Follow-up to https://github.com/salesforce/lwc/issues/1536#issuecomment-535518329

@font-face in CSS is currently global. It should be scoped to the component that declares it.

@font-face {
  font-family: "My Cool Font";
  src: url("/my-cool-font.woff2") format("woff2");
}

div {
  font-family: "My Cool Font";
}

/* Actual (incorrect) */
function stylesheet(hostSelector, shadowSelector, nativeShadow) {
        return ["@font-face {font-family: \"My Cool Font\";src: url(\"/my-cool-font.woff2\") format(\"woff2\");}div", shadowSelector, " {font-family: \"My Cool Font\";}\n"].join('');
}

/* Expected */
function stylesheet(hostSelector, shadowSelector, nativeShadow) {
        return ["@font-face {font-family: \"My Cool Font", "-", shadowSelector, "\";src: url(\"/my-cool-font.woff2\") format(\"woff2\");}div", shadowSelector, " {font-family: \"My Cool Font, "-", shadowSelector, "\";}\n"].join('');
}

[uip-robot-zz]

This issue has been linked to a new work item: W-9667229

[nolanlawson]

Other at-rules we could potentially open bugs for:

• @counter-style
• @font-feature-values
• @property (experimental)
• @color-profile (experimental)
• @viewport (deprecated)

Probably some more stuff I forgot.

[nolanlawson]

Worth noting:

• Vue3 does not support scoping @font-face (although it does @keyframes)
• Ditto for Svelte
• It looks like styled-components also does @keyframes but not @font-face

So this might not be a high-value feature.

[nolanlawson]

Turns out that @font-face does not yet work in native shadow DOM in Chrome and Firefox.

[joannagoch-xtb]

This bug affects me too. Is it possible to change the priority? - it is open for almost a year.

[nolanlawson]

Synthetic shadow DOM is in maintenance mode. We are working to move to native shadow DOM instead.

This particular bug is also complicated by the fact that (as discussed above) Chrome and Firefox do not support the specced behavior yet. Your best bet is probably to manually scope your font-family names for now.