Can I simply add directories to my Discourse install?

dev
1

So, I was adding a local font to my site. In a theme’s CSS file, I put:

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

In my HTML file I put:
<link rel="preload" href="/fonts/montserrat-v26-latin-italic.woff2 " as="font" type="font/woff2" crossorigin="">

I then saved, refreshed my site, viewed the page source and clicked the /fonts/montserrat-v26-latin-italic.woff2 URL, which brought me to:
https://forums.mysite.com/fonts/montserrat-v26-latin-italic.woff2

I was met with a “404 Not Found” Nginx page. I thought, “oh wait, I don’t have a fonts folder on my Discourse directory on my VPS.” Thought it was weird that it didn’t just pull it from the fonts folder in my theme, though. So, I added a “fonts” folder at /var/discourse/shared/standalone/. Put my font file in there, refresh browser page again still a 404 error. Can I simply add folders to Discourse like this or do I need to relaunch my server for it to take effect or what?

2

I’m not sure about adding directories, but regarding using font files in themes, there is a built in method you could try. If you’re editing the Theme files manually, you can add the font to the theme’s /assets directory, then add an entry for it in about.json like this:

{
  // other properties
  "assets" : {
    "my-font-identifier": "assets/my-font-file.woff2",
  }
}

Then in the @font-face you can reference it with src: url($my-font-indentifier);

If you’re just using the Theme editor in the settings interface, I believe you can add it to the uploads section, put the identifier you want to use in the SCSS var name field, then reference it the same way in the SCSS.

5 Likes
3

So, would the assets code be like this for each font I do?

  "assets": {
    "montserrat-reg": "assets/montserrat-v26-latin-regular.woff2",
    "montserrat-ita": "assets/montserrat-v26-latin-italic.woff2"
},

EDIT: That worked. Direct /assets/ URL to the font still shows a 404, but the font is working on the page, so :man_shrugging:

4

In admin site setting you can change the font to Montserrat.
base font
heading font

If you want to add a font which is not in core but it is in Google Fonts then you can use this theme component:

5 Likes
5

Yeah, the Montserrat is for a different page. Appreciate it, though!

Problem with Google fonts is that it slows pages down by loading like 200+ characters, most of which people never even use.

1 Like
6

No it does not — when you use max 3-4 font sets (and only needed weights) as you should.

2 Likes
7

Had a question about this: So, when you View Source the forums page of your (anyone’s) Discourse site, and search “font,” it shows a bunch of them. Are these fonts all loaded even though you only choose 1-2 during the setup wizard? If so, would like only the one I chose to be loaded.