How to change default font

(Lucas Didur) #1


How can I change the default font of discourse theme?

(axil) #2

Go to Admin panel -> Customize -> CSS/HTML -> New, give it a name.

If I want to use a google webfont, under stylesheet I’d use:

@import url(;

body {
    font-family: "Open Sans";

where “Open Sans” the name of the font. For other custom fonts you’d have to place them in the discourse source location app/assets/fonts and somehow include them in your css, but I don’t know how this would be possible without editing manually some files. Maybe a plugin would help.

(Lucas Didur) #3

I’ve tried to do this way, but I can not change. I put this way

html, html body, html body input, html body button, html body select, html body textarea {
    font-family: 'Gotham A',sans-serif;

(axil) #4

It is much easier if you want to use a webfont. Usually you are provided with a url to import it in your css. See for example how to use google fonts.

PS: I edited my first reply with some more info.

(Jean Baptiste W) #5

Hello, I’m looking for change the discourse font. (.eot or .ttf)
Not google import.
Any idea ? :persevere:

(Jeff Atwood) #6

Enable that file extension for upload, then upload font into the Staff assets topic. Reference the local path once uploaded.

(Jean Baptiste W) #7

Thank you, but I don’t anterstant the next step.

(Kane York) #8

That looks correct to me…


I am trying to use the proxima nova font but its not working. Here is the code. What’s wrong in the code?

@font-face {
    font-family: "Proxima Nova";
    src: url("") format('eot');
body {
  font-family: 'Proxima Nova', 'Open Sans', sans-serif;

(Pad Pors) #10

when i change the default font, the fonts of icons do not change. is there a way to fix this?

(Mittineague) #11

Change them in what way or to what?

I doubt if most font sets have glyphs for the icons

(Pad Pors) #12

I’m using Persian font (IranSans), and when i change the default font, the icon fonts remain un-set (Arial). it becomes more or less ugly!

(Mittineague) #13

I don’t think we’re talking about the same thing.

The icons are Font Awesome not Arial

Do you mean buttons or something else?

(Pad Pors) #14

:slight_smile: I mean the buttons, e.g. the text on the reply button is Arial.

(Konrad Borowski) #15

Add the rules for other UI elements as well, as they use their own font.

body, body input, body button, body select, body textarea {
    font-family: "IranSans", sans-serif;

(Ján Janočko) #16

Hi, I have problem changing default font.

I do it like this in CSS customization:

@import url(,700&subset=latin,latin-ext);

html, body {
    font-family: "Noto Sans", sans-serif;

In preview, it is displayed correctly but when I go to the forum main page, “Noto Sans” is not displayed. I can see the correct CSS rule in inspector but it seems like font is not imported and it uses “sans-serif” instead. What could cause this problem?

Notice: CSS customization is enabled, other rules from the same customization work just fine.

(Jay Pfaffman) #17

Did you reload your browser? Do you see that code when you view source of the page?

(Ján Janočko) #18

Sure I did reload page using Ctrl+F5.

I found the problem - import commad must be the first line in css file. I made it the first line in this CSS customization, but I had another CSS customization, that was positioned before this customization. All active customizations are merged into one CSS file and therefore import command was not in first line anymore…

I had to reorder the customizations so that this customization (with import command) is first in the list.

There is no intuitive way to reorder CSS customizations, I had to create new one and copy the contents of old one into it.

(Daniela) #19

Why use the import command when you can use the Html code without problems of positioning?

<link href=",700&subset=latin,latin-ext" rel="stylesheet">


(DenisD) #20

We also struggle with changing default font to FontAwesome. the below is admin/css insert:

  @font-face {
    font-family: 'FontAwesome';
    src: url('') format('woff2'),
    src: url('') format('woff');

 body {font-family: 'FontAwesome';}

appreciate some support here. thx