Overview

How to use Google Fonts with Next.js or React-App. Example uses the template CSS module for both a downloaded TTF file and Google Font API.

Download the Google Font TTF Files

From https://fonts.google.com/ download the the fonts you want to use. For this example we will use

Download the following:

https://fonts.google.com/specimen/Monoton?query=monoton&category=Display

https://fonts.google.com/specimen/Pacifico?query=Pacifico

https://fonts.google.com/specimen/Smooch?query=Smooch

Put the files under ‘./public/fonts/‘ in Next.js.

CSS Module – Downloaded TTF Files

Define the Font Face

Using CSS @font-face to make the new font accessible. Name the font-family and local() with an identifier to be referenced in CSS.

@font-face {
    font-family: 'Smooch';
    src: local('Smooch'), url('/fonts/Smooch/Smooch-Regular.ttf')  format('truetype'), 
}

@font-face {
    font-family: 'Pacifico';
    src: local('Pacifico'), url('/fonts/Pacifico/Pacifico-Regular.ttf')  format('truetype'), 
}

@font-face {
    font-family: 'Monoton';
    src: local('Monoton'), url('/fonts/Monoton/Monoton-Regular.ttf')  format('truetype'), 
}

Create the CSS Selector(s)

Create a file under the styles folder labeled fonts.module.scss or fonts.module.css.

For each font, create a unique CSS style.
The examples below are different sizes and colors.

.smoochFont {
    font-family: 'Monoton';
    font-size: 48px;
    color: darkblue;
    align-items: center;
    justify-content: center;
}

.monotonFont {
    font-family: 'Anton';
    font-size: 36px;
}

.pacificoFont {
    font-family: 'Pacifico';
    font-size: 26px;
}

Next.js Implementation

Source for the entire ‘.\styles\fonts.module.css‘

@font-face {
    font-family: 'Smooch';
    src: local('Smooch'), url('/fonts/Smooch/Smooch-Regular.ttf')  format('truetype'), 
}

@font-face {
    font-family: 'Pacifico';
    src: local('Pacifico'), url('/fonts/Pacifico/Pacifico-Regular.ttf')  format('truetype'), 
}

@font-face {
    font-family: 'Monoton';
    src: local('Monoton'), url('/fonts/Monoton/Monoton-Regular.ttf')  format('truetype'), 
}

.smoochFont {
    font-family: 'Monoton';
    font-size: 48px;
    color: darkblue;
    align-items: center;
    justify-content: center;
}

.monotonFont {
    font-family: 'Anton';
    font-size: 36px;
    color: darkred;
}

.pacificoFont {
    font-family: 'Pacifico';
    font-size: 26px;
}

React-App Implementation

Source for the entire ‘.\styles\fonts.module.css‘

@font-face {
    font-family: 'Smooch';
    src: local('Smooch'), url('../../public/fonts/Smooch/Smooch-Regular.ttf')  format('truetype'), 
}

@font-face {
    font-family: 'Pacifico';
    src: local('Pacifico'), url('../../public/fonts/Pacifico/Pacifico-Regular.ttf')  format('truetype'), 
}

@font-face {
    font-family: 'Monoton';
    src: local('Monoton'), url('../../public/fonts/Monoton/Monoton-Regular.ttf')  format('truetype'), 
}

.smoochFont {
    font-family: 'Monoton';
    font-size: 48px;
    color: darkblue;
    align-items: center;
    justify-content: center;
}

.monotonFont {
    font-family: 'Anton';
    font-size: 36px;
    color: darkred;
}

.pacificoFont {
    font-family: 'Pacifico';
    font-size: 26px;
}

Using Google Font API

Import the Font from Google

Using CSS @import to make the new font accessible.

@import url('https://fonts.googleapis.com/css?family=Smooch');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Monoton');

Create the CSS Selector(s)

Note: If the font name has a space like ‘Odibee Sans‘ then type it out as is with the space.

@import url('https://fonts.googleapis.com/css?family=Odibee Sans');
.odibeeSansFont {
    font-family: 'Odibee Sans';
    font-size: 48px; 
}

For each font, create a unique CSS style block.
The examples below are different sizes and colors.

.smoochFont {
    font-family: 'Monoton';
    font-size: 48px;
    color: darkblue;
    align-items: center;
    justify-content: center;
}

.monotonFont {
    font-family: 'Anton';
    font-size: 36px;
}

.pacificoFont {
    font-family: 'Pacifico';
    font-size: 26px;
}

Import CSS Module to a Page

Using Fonts on a Page

Import the style from the ‘./styles/Fonts.module.css‘

import style from '@/styles/Fonts.module.scss'

...

<div className={style.smoochFont}>
       Your Text Goes Here
</div>

You should see the following for the Smooch font

Conclusion

These are just a few fonts you can add to your Next.js application. Check out Google Fonts collection for yourself here. Google also shows the top fonts that are used if you type the word “top google fonts”.

The top 8 fonts used below were taken directly from Google Search on October 2022.

1. Roboto. Roboto. …
2. Open Sans. Open Sans. …
3. Lato. Lato. …
4. Montserrat. Monstserrat. …
5. Oswald. Oswald. …
6. Source Sans Pro. Source Sans Pro. …
7. Slabo 27px/13px. Slabo. …
8. Raleway. Raleway.