How To Add Google Font in Nuxt Application

featured Image

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.

Related Posts

featured Image

How To Add Robots.txt in your Nuxtjs Application

Here in this article, we will see how to add a robot.txt file in our nuxtjs application after it is built or generated before deployment. Before learning the steps to…

Read more
featured Image

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…

Read more
featured Image

How to generate sitemap for dynamic routes in nuxtjs application

Here in this article, we will learn to create sitemaps for dynamic routes in our nuxtjs application. It is not so easy to create the sitemaps easily with dynamic routes…

Read more