How to add Self-Hosted Fonts to a Next.js App

Photo by Bruno Martins on Unsplash

How to use self hosted fonts in Next.js?

Fonts are very important assets in web development. Let’s see how we can use custom fonts or self hosted fonts in Next.js.

If you have already created your application in Next.js you can continue reading otherwise I would suggest you to read my another post about how to start development in Next.js

Next.js — Start web development with Next.js & create-next-app

Choosing the right font

You can choose any font as you wish for your projects but i will choose Open Sans for the tutorial.

You can download open sans from google fonts or choose another font as you wish.

Convert fonts to ttf, eot, woff, woff2

To be able to support all the browsers we need to convert our font to these types.

There is an online tool for converting all of your fonts to these font types and it creates @font-faces for you after you converted your fonts.

Online @font-face generator

After you add all the fonts you want to convert you can choose all font formats except svg.

After successfully converted all of your fonts there will be download button you can download all of your fonts in different formats.

When you download the folder you will find there is a stylesheet.css file creates all of the font faces for you.

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-ExtraBoldItalic.eot');
    src: url('OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype')…