Does loading a font using @import inside a web component with shadow reload the file?

Question

I'm using Stencil to create a native browser web component using shadow for view encapsulation.

If at the top of my SCSS file I use

@import url($url-icons);

Will that have each component redownload the font/icon files for each component instance, there-by having a negative effect on performance?

If so, what's the best practice to handle this sort of shared dependency?

Answer 1

The browser has a cache mechanism for those font files, so files "should" be downloaded only once (that's not the case when devtools are open with disable cache, which many developers use). But this is actually an implementation detail of the browser, and not of web components.

This means that importing the font itself inside a web component will cause multiple requests by the browser, and by that potentially have an extra cost - delegating the responsibility of fetching the font only once to the browser.

It's better to only include the font-family definition inside the web component css, and import the fonts (only) once in the app requiring the web components library or in the library init method (In Stencil you can add it to your defineCustomElements() call)