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(http://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:

14 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