How To Add Google Font in Nuxt Application

How To Add Google Font in Nuxt Application

📋 Table Of Content

Here in this article we will see how to add google font in your nuxtjs project/application. The process is really simple you just have to import the google font link in your script tag.

If you want to add custom font or want to add a font locally in your nuxt project, check out our previous post here

Step 1 : First go-to fonts.google.com and search the fonts in the searcnh bar that you want to add.

Step 2 : After that select the font style you want example thin, regular or bold etc.

Step 3 : Once selected you will see the selected fonts list in the right hand side of your screen.

Step 4 : Copy the link given below in your screen. For example


<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,300;1,500&display=swap" rel="stylesheet">

To add the google font link (API) in your nuxt project , we have to add it in the link array inside the nuxt.config.js file


export default {
  head: {
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,300;1,500&display=swap",
      },
    ],
  },
}

After adding it you can use it in any of your nuxt pages. For example in your index.vue page.


<style>
html {
   font-family: "Roboto";
}
</style>

Or, if you want to use the font globally just add it in your layout/default.vue page.