How To Add Font Locally In Nuxt App

In this tutorial, we will learn the step-by-step process of how to add a custom google font locally in your nuxtjs application. You can either use a premium font or you can just use any free google font that you like.

We will be using @font-face css property to add the font, it allows you to load custom fonts on your website. Once it is added to your CSS file it instructs the browser to download the font file from where it is hosted.

Download Font from google font website

First, get the font family you want to use in your nuxtjs project from fonts.google.com and then download it to your computer.

Note: You can get fonts from other sources or sites that you want.

Add the custom font in Nuxt Application

To add the custom font, follow the steps:

Step 1: Open your nuxt app in your favourite code editor.

Step 2: Now copy-paste the downloaded font file into the assests folder of the project directory.

Step 3: Now create a global stylesheet file eg: global.css and add the font as given below:

global.css

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.ttf')  format('truetype'),
}

Step 4: Once you have added the code to your CSS file, add the following line in your nuxt.config.js

css: [
    "~layouts/global.css",
],

Step 5: Now you can use the font anywhere in your project.

<style>
    body {
    font-family: 'MyWebFont', Fallback, sans-serif;
    }
</style>