Open bts-ncollins opened 2 years ago
Can You please prepare CodeSandbox (e.g. fork this one - https://codesandbox.io/s/o1fsc)?
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);
}
I encountered the same issue, I resolved it by creating a
<link>
tag in thecreated()
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.
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