#font-face not loading in shadowDom - html

Question

this.shadowRoot.innerHTML = `
<style>
#font-face {
font-family: SpaceGrotesk;
src: url(/fonts/SpaceGrotesk-Medium.ttf);
}
#font-face {
font-family: SpaceGroteskLight;
src: url(/fonts/SpaceGrotesk-Light.ttf);
}
* {
box-sizing: border-box;
}
.tipme {
position: relative;
font-size: 1.4rem;
font-family: SpaceGrotesk, sans-serif;
text-align: center;
background-color: #fff;
padding: 4rem 1.4rem 1.4rem;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08);
margin: 5rem 1.4rem 1.4rem;
width: 50rem;
}
h1 {
font-family: SpaceGroteskLight, sans-serif;
font-weight: 400;
font-size: 2.6rem;
margin: 1rem;
}
`;
...
The browser is not requesting the the font files.
I tried in incognito mode so its not a cache issue.
This is a distributed component running on multiple sites, so I cannot just load the font in the parent html. It needs to be encapsulated.

Answer 1

I ended up just dynamically adding style loading fonts to parent page:
this.fonts = `
#font-face {
font-family: SpaceGrotesk;
src: url(${this.host}/fonts/SpaceGrotesk-Medium.ttf);
}
#font-face {
font-family: SpaceGroteskLight;
src: url(${this.host}/fonts/SpaceGrotesk-Light.ttf);
}
`;
const style = document.querySelector('style[data-description="tipme-fonts"]');
if (!style) {
const el = document.createElement('style');
el.dataset.description = 'tipme-fonts';
el.appendChild(document.createTextNode(this.fonts));
document.head.appendChild(el);
}