Font hosting with stenciljs

29 Nov, 2023

Last year I tried setting up custom fonts with stenciljs. My goal was to serve the font files from within the package. I wasn't able to do it, so I resorted to loading font files from a blob storage first.

Recently though I stumbled upon this post on stackoverflow explaining how to use local font files.

Here's the gist of it (works with stencil v4.5):

1. Add the fonts into src/assets/fonts.

2. For your output target, add a copy task to copy the font files to the correct directory:

    {
      type: 'dist',
      /* other config*/
      copy: [
        {
          src: 'assets/fonts',
          dest: 'assets/fonts',
          warn: true,
        }
      ],
    },
    {
      type: 'www',
      /* other config */
      copy: [
        {
          src: 'assets/fonts',
          dest: 'build/assets/fonts',
          warn: true,
        }
      ],
    },

This will make sure we can use the fonts in our css file from the same link.

3. Inside your globals.css, add a new font face with your font file:

@font-face {
  font-family: yourfontfamily;
  font-weight: 500;
  font-style: normal;
  src:url("assets/fonts/yourfontfile.woff2");
}

You should now be able to source the font files from your package, having the font family available in your web components.

PS: A solution I didn't try was encoding the font file in a base64 string and putting it directly into the css.