vue-custom-element Linking to fonts in shadow dom

First of all, thanks for this repo, it plugs a hole that Vue has and React doesn't and it's working great for my project.

I've stumbled across one thing, with shadowDom enabled, I'm linking to fonts from Google they don't appear to work. It does the initial request and pulls the css file, but doesn't then get the WOFF so the font doesn't come through. Or in the case of Material Icons, they're rendered as placeholders.

I've tried importing using @import url("") in the scss and also with the <link href="" tag in the Vue file itself.

Any ideas how to get this working? I guess I could hold them locally from an npm package but this doesn't feel right.

Thanks again

Nov 05 '21 09:11 bts-ncollins

Can You please prepare CodeSandbox (e.g. fork this one - https://codesandbox.io/s/o1fsc)?

Nov 05 '21 09:11 karol-f

I encountered the same issue, I resolved it by creating a <link> tag in the created() lifecycle hook of my entry App.vue file, then appending that to the document's <head>:

created() {
    const fonts = document.createElement("link");
    fonts.type = "text/css";
    fonts.rel = "stylesheet";
    fonts.href = "https://fonts.googleapis.com/css2?family=Assistant:wght@500;700&display=swap";
    document.head.appendChild(fonts);
}

Apr 06 '22 15:04 allynsweet

I encountered the same issue, I resolved it by creating a <link> tag in the created() lifecycle hook of my entry App.vue file, then appending that to the document's <head>:
created() {
    const fonts = document.createElement("link");
    fonts.type = "text/css";
    fonts.rel = "stylesheet";
    fonts.href = "https://fonts.googleapis.com/css2?family=Assistant:wght@500;700&display=swap";
    document.head.appendChild(fonts);
}

This really works, thanks.

Feb 09 '23 08:02 SkyGopnik

vue-custom-element vue-custom-element copied to clipboard

Linking to fonts in shadow dom

vue-custom-element
vue-custom-element copied to clipboard