When several web components need to share custom font families, loaded by the document with @font-face, the solution is to use CSS variables like:

html {

--ffSans: "Corporate Sans", sans-serif;

--ffSerif: "Corporate Serif", serif;

}

Then use those variables in the components like:

:host {

font-family: var(--ffSans);

}