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
-
Create a new theme component
Navigate to
Admin Sidebar -> Appearance -> Components -> Install -> Create New
. Choose a name and select “Component”. -
Edit CSS/HTML
Click on the “Edit CSS/HTML” button.
-
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 theCommon -> /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.
-
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'; }
-
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: