@font-face with Shadow DOM in web component?

Question

We have created a web component using custom elements with Angular 8. Part of the component is to show some custom icons (developed and packaged as a different app). As you can see in a previous question we have managed to bundle all css in a file and show them in a standalone app using :host ::ng-deep but without using shadow DOM.

After switching to shadow DOM (encapsulation: ViewEncapsulation.ShadowDom) in my web component and removing the soon to be deprecated ::ng-deep the fonts appear broken in the application.

The only solution I find here and here suggests that the font declaration must happen outside of the shadowDOM, for instance inside the html file that includes the custom component js file (as a standalone application). In my case the fonts are packaged as a different app, and the custom web component is going to be used across many projects with different technologies that may not have the ability to include it.

Is there another way for custom icons (@font-face) to work in shadow DOM?

Sastruga

Does this answer your question? How to use Material Design Icons in a web component? – Imparadise

Thank you for the suggestion, this answer does give me a lot to think about. The first suggestion is using the link in the parent application which is not feasible in my case. The use of light DOM however is something to look into, though it is explained for vanilla JS and not using angular elements in that case. – Sastruga

This seems to be a limitation of shadow dom. I'm having same issue. @font-face doesn't work in shadow dom. – Kaiser