Change the default font on your site

[Discourse]

This guide explains how to change the default font on your Discourse site, either for specific elements or by using a font library other than Google Fonts.

Required user level: Administrator

This guide is only needed if you want to integrate with a font library other than Google Fonts or to change the font of only some elements of the site. If you are using Google Fonts and want to change the font globally across your site, try out this theme component instead: Google Fonts.

This guide will cover:

• Changing the site font globally
• Applying different fonts to specific elements
• Using both Google Fonts and custom fonts

Steps to change the default font

1. Create a new theme component

   Navigate to Admin Sidebar -> Appearance -> Components -> Install -> Create New. Choose a name and select “Component”.

2. Edit CSS/HTML

   Click on the “Edit CSS/HTML” button.

   

3. Add the font using Google Fonts

   If you want to use a Google webfont, add the following to your Common -> CSS tab:

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

   Ensure the @import url line is placed at the top of the stylesheet.

   In this example, Oswald is the name of the font.

   If there’s an issue with the @import url method, you can alternatively use the <link> method by inserting the appropriate line inside the Common -> /head tab of your theme component:

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

   This method will change the site font globally.

4. Apply fonts to specific elements
   You can also change the site font to just some elements.

   To change the font for only some elements, such as the navigation bar or topic titles, add:

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

   

   Alternatively, to change the font of a specific category, use:

   body.category-CATEGORY-NAME {
       font-family: 'YOUR-NEW-FONT';
   }
   

5. Add the new component to main themes

   Ensure to add the newly created theme component to all main themes that users can select:

   

Last edited by @SaraDev 2024-07-16T19:44:44Z

Check document

Perform check on document: