Customizing Fonts

In the Mou template, we used 2 font families served by Google Fonts:

• Archivo – Primary font for the main text and some subheadings.
• Big Shoulders Text – Secondary fonts for the Main heading and some subheadings.

Use other Google fonts

Step 1

1. Go to the Google Fonts website
2. Search and select your favorite font family name
3. Select the Styles, e.g. Light 100, Regular 400, etc. You can add 1 or more font-family to the selected list
4. To import the code to style.css just copy @import url('https://fonts.googleapis.com/css2?family=Archivo&display=swap');
5. Also, copy the CSS rules to specify families font-family: 'Archivo', sans-serif;

Step 2

1. Open the style.css file in a code editor. You can use Visual Studio Code as a free editor.
2. Replace the Google fonts import code and put the correct names for your new fonts in the CSS variables of :root selector:

/* 1.1 Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&display=swap');
/* 1.2 Root variables */
:root {
    /* Default Fonts */
    --font-primary: "Archivo", sans-serif;
    --font-secondary: "Big Shoulders Text", cursive;

Using self-hosted fonts

To use your own free/premium TTF/OTF font, you need to convert it to a web-compatible format like WOFF/WOFF2. There is a handy free online tool called Transfonter. It allows you to convert your custom fonts to web-compatible format and generate the required files. After the conversion please follow the below steps to make it work:

Step 1

1. Extract the zip folder
2. Copy .woff and .woff2 files and paste it to ‘mou-template/assets/fonts/’
3. Go back to your converted fonts folder and open the stylesheet.css file in a text/code editor
4. You’ll see some lines of code:

@font-face {
    font-family: 'Roman SD';
    src: url('RomanSD.woff2') format('woff2'),
        url('RomanSD.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Step 2

1. Copy those lines of code and paste them to the mou-template main stylesheet (style.css) file. Now you can remove the Google Fonts.

/*REMOVE The Google Fonts and use this code instead*/

@font-face {
    font-family: 'Roman SD';
    src: url('../fonts/RomanSD.woff2') format('woff2'),
        url('../fonts/RomanSD.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Step 3

1. Put the correct names for your new fonts in the CSS variables of :root selector:

/* 1.2 Root variables */
:root {
    /* Default Fonts */
    --font-primary: 'Roman SD';
    --font-secondary: "Big Shoulders Text", cursive;

✨ You are done!