How to change default font of your site


(Lucas Didur) #1

Hello,

How can I change the default font of discourse theme?


How to change font on my site
(Daniela) #2
  1. Go to Admin panel -> Customize -> Themes -> New, choose a name and select “Component”.

  2. Click on the Edit CSS/HTML button

  3. If I 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:


How to change font on my site