Web fonts (@font-face) cannot be loaded from within the Web Component

[mbeckem]

It appears that browser simply ignore @font-face declarations within the web component's shadow dom.

Stylesheets that rely on the presence of certain web fonts (e.g. icon fonts) will therefore not work by default, since the web fonts are not downloaded at all.

Idea for an workaround:

• Inject minimal css to load the font faces in the outer site's document head. This is technically a violation of encapsulation but there does not seem to be a better way at the moment
• The bulk of the css should still be in within the web component

See also

• https://stackoverflow.com/questions/60504404/how-to-use-material-design-icons-in-a-web-component
• https://gist.github.com/sbatson5/347a896e81e25afebd20fa5bea4c8125