How to change default font of your site

Hello,

How can I change the default font of discourse theme?

2 Likes
  1. Go to Admin panel -> Customize -> Themes -> Install -> Create New, choose a name and select “Component”.

  2. Click on the Edit CSS/HTML button

  3. If you want to use a google webfont add in your Common -> CSS tab:

        @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    
        body {
            font-family: 'Oswald', sans-serif;
        }

    where ‘Oswald’ is the name of the font. The line with @import url must be put on top of the stylesheet.
    If you have problem using the @import url method you can use instead the <link href="#" rel="stylesheet"> method inserting the appropriate line inside the Common -> /head tab of your theme component, eg:
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

    This will change the site font globally, otherwise you can change the site font to just some elements, for example the navigation bar or topics title:

        @import url('https://fonts.googleapis.com/css?family=Oswald:200,300');
    
        .navigation-container, 
        .link-top-line {
            font-family: 'Oswald', sans-serif;
        }

  4. Add the new component to all the main themes that can be selected by users:

If you use custom fonts you’d have to follow this guide:

16 Likes

Following these instructions on a new, vanilla install of Discourse, the imported font seems not available. The new component’s custom CSS (component added to theme, and background-image is working) is:

Summary
@import url('https://fonts.googleapis.com/css?family=Roboto:400');

body { 
    background-image: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        url($starfield);
    background-repeat: repeat;
    background-blend-mode: darken;
}

#main-outlet { 
    background-color: rgba(0, 0, 0, 0.60);
}

h3, h2, h1, a.title, .fancy-title, .topic-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.category-list tr:nth-child(odd) {
    background-color: #secondary;
    background-image: none;

}

.topic-list-item:nth-child(odd) {
    background-color: #secondary;
    background-image: none;
}

.latest-topic-list-item:nth-child(odd) {
    background-color: #secondary;
    background-image: none;
}

As a side note, the nth-child(odd) styling is not working, but that could be addressed in a new topic.

have you tried

?

All is working on my test site, (I changed the nth-child(odd)color to red, green and blue just to see the differences better):

2 Likes

It’s possible you may have to whitelist fonts.googleapis.com under the content security policy to get this to work correctly. I don’t have access to a site to test at the moment to say for sure though.

2 Likes

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

is in the Common -> /head tab of the theme component (it’s been there, from my previous testing). Also tested with CSP disabled, and still no go.

I’m happy to share an admin login with anyone who could poke around to help solve this mystery.

1 Like

We need only a link to your site for now.

3 Likes

https://medina.screamingfirehawks.live/

At present CSP is on, with whitelisted sources
content security policy script src:

https://fonts.googleapis.com
https://fonts.gstatic.com

Font appears working now! For future visitors to the thread, here’s the working SCSS:

Summary
@import url('https://fonts.googleapis.com/css?family=Roboto:400');

body { 
    font-family: 'Roboto', sans-serif;
    background-image: linear-gradient(
          rgba(0, 0, 0, 0.3), 
          rgba(0, 0, 0, 0.3)
        ),
        url($ringspace);
    background-repeat: repeat;
    background-blend-mode: darken;
}

#main-outlet { 
    background-color: rgba(0, 0, 0, 0.50);
}

h3, h2, h1, a.title, .fancy-title, .topic-link {
    font-weight: medium;
}

.category-list tr:nth-child(odd),
.topic-list-item:nth-child(odd),
.latest-topic-list-item:nth-child(odd)
{
    background-image: linear-gradient(
          rgba(0, 0, 0, 0.2), 
          rgba(0, 0, 0, 0.2)
        );
}

Firefox & Chrome Inspectors were very useful, as were these simple extensions:

1 Like

Is it possible to change the font on one category? We have a category that is in Japanese and I was informed that using Atok is the preferred font with the Japanese language. I would not want to change all of the site, simply the one category.

You can, luckily, Discourse add a class for each category, you can customize everything

Use the css code in the first post but instead of body use body.category-nameofthecategory, then add the rest of the css code with the right font

If your category is named japanese it should be body.category-japanese

body.category-japanese {
    font-family: '';
}
2 Likes

I didn’t check if each category has its own html class on body but if it’s the case, it can easily be achieved with a single line of css.

Edit : @Steven has been faster!

1 Like

Does this look right for using Noto Sans

body.category-Japanese {
    font-family: 'Noto Sans', sans-serif;
}

Here is what I have in my Common CSS, however when I go into the preview there is no difference.

   @import url(https://fonts.googleapis.com/css?family=Open+Sans);

    body.category-Japanese {
        font-family: "Noto Sans CJK JP", sans-serif;
    }

Does anyone have any suggestions for what I am missing?

Nope, look to the related google fonts page, select the 3 Noto Serif fonts for CJK and customize the code selecting Latin, Japanese, Chinese and Korean. The result will be:

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP|Noto+Serif+KR|Noto+Serif+SC&display=swap&subset=chinese-simplified,japanese,korean');
font-family: 'Noto Serif JP', ;
font-family: 'Noto Serif KR', ;
font-family: 'Noto Serif SC', ;

This should work.

1 Like

That did work on the category page, however, it did not change the posts inside the category. Here is the correct unit on the category page and compare it to the title on the actual post.

From what I can see on your site the correct code should be

   body.category-Japanese-Tips {
        font-family: 'Noto Serif JP', ;
    }

and not only

   body.category-Japanese {
        font-family: 'Noto Serif JP', ;
    }
4 Likes

Hi Robert,

I looked into this for you and the reason the font didn’t change when viewing that topic is because that topic’s category is a subcategory of the Japanese category, so the class on the body tag is different.
I’ve updated the CSS on your site so that the font applies to all the subcategories of the Japanese category and now I can see the correct font applied when viewing that topic:

(Note I didn’t enable the Japanese Font component on your site, so to see the changes yourself you’ll need to preview the component or enable it by adding to the main theme of your site.)

6 Likes