Search code examples
vue.jsfontsstenciljsstencil-component

Custom font for stencil.js component

I have a stencil component that I want to set a font to. What I have now:

index.html

<body>
  <sidebar-component webpagename="dashboard"></sidebar-component>
</body>

<style>
  * {
    margin: 0;
    font-family: Lab_Grotesque_Light;
  }

  @font-face {
    font-family: 'Lab_Grotesque_Medium';
    src: url('./assets/fonts/Lab_Grotesque_Medium.otf');
    font-weight: normal;
    font-style: normal;
  }
</style>

This sets the font when I start my component locally. But I want to use the component in a Vue application (imported from npm). There the custom font wont work. Is there another way to implement this.

Solution

  • If I put the @font-face{} in the header of the index-file. It actually worked from my other applications that uses the stencil component.

    In index.html

    <head>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "LabGrotesque-light";
      src: url("../assets/font/lab-grotesque-light.otf") format("opentype");
    }
  </style>
</head>