SPFX Question Is it possible to include a custom font reference by extending the toolchain?

Question

I have a custom font, I include it in the bundle and add it to the dist folder, but the js reference is still linking to its original location. Any ideas? [

Answer 1

Adrian,

I was able to resolve this issue with the exception of WOFF2 fonts. Here is how I did it.

1. Upload the font files in the same folder as the .SCSS file. For simplicity, I kept the font files in the same folder as the SCSS, but once you can prove it works, feel free to move the files anywhere you'd like.

2. Include the @font-face definition in your SCSS. For this example, I used Google Webfont's generated SCSS:

   @font-face {
       font-family: 'Aclonica';
       font-style: normal;
       font-weight: 400;
       src: url('./aclonica-v8-latin-regular.eot'); /* IE9 Compat Modes */
       src: local('Aclonica Regular'), local('Aclonica-Regular'),
       url('./aclonica-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       //  url('./aclonica-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./aclonica-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./aclonica-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./aclonica-v8-latin-regular.svg#Aclonica') format('svg'); /* Legacy iOS */
   }
   

3. Note that I commented out the woff2 font. This is the only one that would require messing with webpack and gulp, which I didn't want to do.

That is all you need to do.

Bonus tip: I noticed from your code sample that you only specify the TTF font file. You can use http://font2web.com/ to convert your custom TTF to webfonts if you want broader browser support.

I hope this helps?

Answer 2

a bit late but to resolve the woff2 issue, simply add a file called copy-static-assets.json to your config/ folder with the following contents:

{
  "includeExtensions": [
    "woff2"
  ]
}

this will copy woff2 files to the lib/ output folder which should resolve the error.