שנה את גופן ברירת המחדל באתר שלך

[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:

• Using the built-in font settings
• Changing the site font with a custom font
• Applying different fonts to specific elements

Built-in font settings

Discourse includes a built-in font picker with a selection of bundled fonts. This is the simplest way to change your site’s font without any custom CSS.

Navigate to Admin > Appearance > Fonts to access the font settings page. From here you can set:

• Base font — used for most text on the site (default: Inter)
• Heading font — used for headings (default: Inter)
• Default text size — the default text size for all users

These settings use the --font-family and --heading-font-family CSS custom properties under the hood, which themes can also override.

Changing the font with a custom font

If you want to use a font not included in the built-in list (e.g. from Google Fonts or a self-hosted font file), you can do so via a theme component.

1. Create a new theme component

   Navigate to Admin > Appearance > Themes & 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=Oswald);
   
   html {
       --font-family: 'Oswald', sans-serif;
       --heading-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

Last checked by @sam 2026-03-18T04:24:33Z

Check document

Perform check on document: