Add a custom font to my theme via the assets repository

Development

AI-generated summary

Adding Custom Fonts to a Discourse Theme

Joart is trying to add a custom font to their Discourse theme via the assets repository but encounters issues. After sharing their code and setup, Southpaw points out a potential path discrepancy in the about.json and CSS files. awesomerobot suggests referencing the font files using asset names as variables in the CSS.

Despite trying these suggestions, Joart still faces issues. pfaffman asks for more code details and suggests sharing the theme on GitHub. Southpaw shares their own experience with adding custom fonts, noting the importance of using a reputable font converter.

Ultimately, Joart resolves the issue by using a .ttf font format instead of .woff2. The solution involves uploading the font file using the Add Upload modal and adding the necessary @font-face and body lines in the theme’s SCSS.

1

Hello,
I am trying to add a custom font to my theme but it doesn’t work… I certainly did something wrong but I can’t find where.

  • I am developing my own theme that I installed via github.
  • In the assets repository, I uploaded my fonts that are not Google fonts :

Capture d’écran 2023-04-06 à 10.56.37
Capture d’écran 2023-04-06 à 10.56.371129×138 15.4 KB

  • In the about.json, I imported the files :

Capture d’écran 2023-04-06 à 11.09.51

  • In my scss repository, I created my font families :

Capture d’écran 2023-04-06 à 10.58.07
Capture d’écran 2023-04-06 à 10.58.07517×203 13.4 KB

I tried to add : format(‘woff2’) but it doesn’t work neither.

  • And then :

Capture d’écran 2023-04-06 à 11.07.22

Well, it does not work… Any idea ?

2

I am not sure what the issue night be. I’d look at Include assets (e.g. images, fonts) in themes and components. Sorry if that’s not helpful.

3

Hi @Joart,

I’m sure I’m oversimplifying, but I notice in your about.json snippet, the path to the fonts points to an assets folder, but in your css, the path points to a fonts folder. Are you sure the css source path is correct?

4

This is a good catch, but you don’t want to use the path in your CSS like this, you should reference the files using the asset name as a variable:

@font-face {
   font-family: supply-light;
   src: url($supply-light);
}

This is covered in Include assets (e.g. images, fonts) in themes and components

5

Well I tried but it doesn’t work :frowning:

6

It’s hard to guess why. You might put your theme on github and link to it or post your code here.

Did you follow the example provided by @awesomerobot?

7

Hi @Joart,

I played with this a bit on a fairly new Discourse instance, and had some trouble with the first few fonts I tried. I had converted them to .woff2 using a free, online converter, and I think maybe it didn’t do a good job.

When I tried with an .otf font and again with another .woff2 font converted by a more reputable converter, I was able to add the custom font using the steps in guide @pfaffman and @awesomerobot linked.

image
image1060×415 34.4 KB

It really only took two steps - uploading the file using the Add Upload modal, and adding just the @font-face and body lines of the example SCSS to the theme or component.

I’m sure if you can tell give us more detail and share your code and the fonts, we can help you get this figured out.

8

Oh Yes, thank you! I tried with the ttf format and it works!