1

Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.

It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?

But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?

Shane
  • 827
  • 8
  • 18
  • Are you asking about [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) or [Vue.js single file components](https://vuejs.org/v2/guide/single-file-components.html) or something else? – Stephen Thomas Dec 17 '19 at 01:15
  • @StephenThomas Web Components built with `vue-cli-service build --target wc --name my-custom-element --inline-vue ./src/App.vue`. – Shane Dec 17 '19 at 07:24

0 Answers0