Customizing Fonts

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

• Nunito – Primary font for the main text and some subheadings.
• Monoton – Secondary fonts for a fancy style like Coming Soon Page.

Use other Google fonts

Step 1

1. Go to 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=Nunito&display=swap');
5. Also, copy the CSS rules to specify families font-family: 'Nunito', 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=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
/* 1.2 Root variables */
:root {
  /* Default Fonts */
  --font-primary: 'Nunito', sans-serif;
  --font-secondary: 'Monoton', 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 ‘nijhum-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 nijhum-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: 'Monoton', cursive;

✨ You are done!