How to change default font


(Lucas Didur) #1

Hello,

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(http://fonts.googleapis.com/css?family=Open+Sans);

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…


#9

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("http://domain.com/uploads/default/original/1X/2e7dee5168278e03c4c5e9d275a7def92854c30f.eot") 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(http://fonts.googleapis.com/css?family=Noto+Sans:400,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="http://fonts.googleapis.com/css?family=Noto+Sans:400,700&subset=latin,latin-ext" rel="stylesheet">

:thinking:


(DenisD) #20

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

  @font-face {
    font-family: 'FontAwesome';
    src: url('http://146.185.133.183/uploads/default/original/1X/638c652d623280a58144f93e7b552c66d1667a11.woff2') format('woff2'),
    src: url('http://146.185.133.183/uploads/default/original/1X/4a313eb93b959cc4154c684b915b0a31ddb68d84.woff') format('woff');
  } 

 body {font-family: 'FontAwesome';}

appreciate some support here. thx