Custom font for stencil.js component

Question

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.

So your problem is that the web-component has the right font in this setup but not when you use the font inside a vue application? — Christian Meyer, Dec 04 '19 at 11:39
Well, when I just run the stenciljs component in localhost, it works. But then, I upload it to NPM and use it in a VUE project, and there the font won't work @ChristianMeyer — Johan Byrén, Dec 04 '19 at 11:59

remjx · Answer 1 · 2021-03-05T19:47:37.540

2

This is covered in the docs now. You can save the font to your src folder and reference it directly. https://stenciljs.com/docs/local-assets

Update: Actually it looks like there is an issue where it is not possible to load custom fonts within a Shadow DOM https://github.com/ionic-team/stencil/issues/2072

edited Mar 05 '21 at 19:47

answered Mar 05 '21 at 19:13

remjx

4,104
3
34
32

score 1 · Accepted Answer · answered Jan 09 '20 at 15:40

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>

score 0 · Answer 3 · answered Dec 19 '19 at 14:15

0

You have to manually define the font face in your Vue application to make this work. Just like you did in the index.html of stencil.

If you dont want to include the font assets in you vue application you can either copy the font assets with https://stenciljs.com/docs/copy-tasks or https://docs.npmjs.com/files/package.json#files to your npm package.

answered Dec 19 '19 at 14:15

Valentin Rapp

432
6
11

I have the font in my Vue project as well, but the stenciljs component will not have the correct font when its added to the vue project. In the vue app I set the font in my App.vue. The same way as I do in stencil. So the font works for everything in the app, but not for the stenciljs sidebar. – Johan Byrén Dec 19 '19 at 16:09
Can you share a link to your repository? – Valentin Rapp Dec 20 '19 at 10:22

Custom font for stencil.js component

3 Answers3