Font family not working

AI-generated summary

The discussion, titled “Font family not working,” revolves around Radu’s issue with changing the font family in their Discourse install. Despite trying various methods, including using CSS and importing fonts from Google, Radu is unable to change the font from Arial.

CocoQuark and MihirR suggest troubleshooting steps, such as checking the browser’s developer tools, clearing cache, and performing a hard refresh. MihirR also provides code snippets to override the font family, but Radu is only able to get it working for h1 elements.

As the discussion progresses, Radu shares screenshots showing HTTP issues, which CocoQuark suggests may be related to the font being served over HTTP instead of HTTPS. MihirR recommends running ./launcher rebuild app and checking for themes or plugins, but Radu mentions it’s a fresh install.

Don chimes in, suggesting that the force_https site setting might not be enabled, and provides steps to enable it via the rails console. Radu reveals they are using a reverse proxy due to port conflicts with Fastpanel, which may have contributed to the issue.

Ultimately, Radu is able to resolve the issue after enabling force_https, and expresses gratitude to Don for the solution. The discussion concludes with CocoQuark and Jagster providing additional insights on reverse proxies and their potential impact on Discourse installs, as seen in CocoQuark and Jagster.

It drives me crazy the fact that I cannot change the font family. I select Inter (or other font family) as my font family and there are no changes, I can’t change the Arial font family.

I also tried Inter with the CSS method with the @import from Google Font. NOT WORKING! How do I actually change the font family?

Much appreciated.

Obligatory silly question. Did you reload the page?

Can you select any text of your forum (like a post contents) and see what font-family is set to, using your browser dev tools ?

Please try clearing the cache or performing a hard refresh of the browser; it will most likely work.

I did all of that. I cannot get rid of Arial.

Thanks @MihirR I did that, I do it all the time. Still Arial everywhere…

To check why it’s not working, you can add this to your Edit HTML/CSS and see if the new font appears:

body {
  font-family: 'Times New Roman', serif !important; 
}

h1 {
  font-family: 'Courier New', monospace !important;
}

That’s weird.

What does it look like when using safe mode (the safe mode should keep the custom font)?

Is there any error in the js console or network tab?

I tried this yesterday and It works only for H1.

OMG… :man_facepalming:

It’s a fresh Discourse install. I’m trying do figure this issue.

Yeah, it’s for h1. If you want it for everything, you can use this:

* {
  font-family: 'Times New Roman', serif !important; 
}

Not working. As you can see above it seems that there are some http problem, I have no idea why since everything else is https.

You may want to diagnose why the font is served over http instead of https.

Is your Discourse a standard install?

* {
  font-family: 'Inter', sans-serif !important; 
} 

See, if the H1 works, this should definitely work too.

You can try running: ./launcher rebuild app

Also, are you using any themes? (I assume not, since you mentioned it’s a fresh install, so it’s free of themes and plugins.)

However, I tested some fonts, and they work well on my end, so it’s not an issue on Discourse’s side.

By any chance, are you using a reverse proxy?

Hello :wave:

If so, the force_https site setting is automatically enabled. This is a hidden site setting that you can change in the rails console. It might not be enabled somehow :thinking:

Give it a try :slightly_smiling_face:

cd /var/discourse
./launcher enter app
rails c
SiteSetting.force_https=true
exit

I’m new to Discourse, installed it via Docker / Github. I have no idea what Standard means.

Yes, I use reverse proxy because I have Fastpanel. Fastpanel and Discourse use the same ports, so I had to use reverse proxy.

Oh my god! It worked!!!
Thank you so much, you saved me!!

Much appreciated @Don !!!

There’s a link in my post, “standard install” automatically links to the topic that explains what it is :slight_smile:

To elaborate on what Don said, the force https was one available in Discourse admin settings, but not anymore as HTTPS has been enabled by default on Discourse for a long time now (like, 2 years maybe?). So, if needed, this now hidden setting must be enabled via the command line for example.

I suppose :thinking: using a reverse proxy makes your Discourse not a standard install and may have caused the issue you faced (can’t know for sure).

Anyway, enjoy Discourse :discourse: :partying_face:

Depends of reverse proxy how it talks with a backend. Varnish, if not Enterprise, doesn’t use SSL after termination and that’s why reverse proxy must send something like proxy_set_header X-Forwarded-Proto https;.

But good to know I have to go to hidden settings next time I use Varnish between Nginx and Discourse (plus something else, because otherwise it would be just stupid in my scale).

Or am I totally misunderstanding what forcing means now?