Including custom fonts in Sage9

sage9
#1

Hello, what is proper way to include custom fonts to sage9 theme?
i’ve tried with

@font-face {
font-family: “Barlow-Regular”;
src: url("…/fonts/Barlow-Regular.ttf") format(‘ttf’);
}

.test {
font-size: 16px;
font-family: Barlow-Regular, sans-serif;
}

but it doesn’t change font.

#2

@dzoniis not sure if it would be enough to break it, but I believe the format should be “truetype” and not “ttf”. Also, double checking: I’m assuming you ran yarn build before testing?

#3

Tried with truetype and used yarn build ofcourse

#4
  • Do the font files appear in dist/fonts after yarn build?
  • What is the location of Barlow-Regular.ttf? Is it at resources/assets/fonts/Barlow-Regular.ttf?
#5

Yep, they are in dist/fonts and location of Barlow-Regular.ttf is in that location
I have no 404 errors or something like that, it just won’t display it

#6

@dzoniis - hm, don’t have a lot of trouble shooting ideas left.

Assuming you haven’t solved the problem on your end yet, if you change your style to this, do you see a serif font being used?

.test {
  font-size: 16px;
  font-family: Barlow-Regular, serif;
}

If so, that will confirm that the browser a) is picking up your style and applying it to the element you’r testing with and b) knows it can’t find the Barlow font.