How To Add Google Font in Nuxt Application

How To Add Google Font in Nuxt Application

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 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=",[email protected],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: ",[email protected],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.

html {
   font-family: "Roboto";

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