SXA doesn't recognize font files - how do I include them in my theme?

Question

I have a pretty typical font setup: in my creative-exchange theme folder, I placed some custom font files and I reference my fonts like so:

@font-face {
    font-family: "Graphik";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/Graphik-Regular-Web.woff2") format('woff2');
}

However, when I go to Experience Editor, I see the browser is trying to fetch the font but is getting a 500 error. I already have my theme setup via SXA-cli, so it should have uploaded the fonts. I also tried directly adding the fonts to the content editor, but that didn't help either. What am I doing wrong?

Answer 1

The problem is that the fonts directory of your local theme just isn’t anywhere in the config to be watched or uploaded. So, open up the gulp/config.js and add 'fonts/**/.' to one of the sections:

Source :: https://citizensitecore.com/2021/08/11/custom-fonts-not-uploading-to-sxa-theme/