Yesterday I found out that the shadow DOM is less isolated than I thought, but there’s another quirk that completely bewildered me: the @font-face rule does not work in the shadow DOM. Yes, it’s that simple and that frustrating.

Here’s a live demo demonstrating the issue:

This is apparently a long-standing issue due to the technical complexities in implementing support for the @font-face rule in the shadow tree, even though the CSS specifications define that it should work.

The only workaround is to declare the fonts at the document level, outside of any shadow DOM. This defeats one of the main purposes of using shadow DOM: creating truly encapsulated, self-contained components.

Another nail in the coffin of the shadow DOM, unfortunately. For projects requiring custom fonts in components, this limitation can be a deal-breaker.