Change the default font on your site

:information_source: These instructions are needed if you need 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.

  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(https://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;
        }

    or only the font of a specific category

    body.category-CATEGORY-NAME {
        font-family: 'YOUR-NEW-FONT';
    }
    
  4. Add the new component to all the main themes that can be selected by users:

To add custom fonts not already available to load via a URL, follow this guide: Include images and fonts in themes and components

11 Likes