Add Google Font to Nuxt Js Application

A google font can be obtained from https://fonts.google.com/. For example, to add DM Sans font to our Nuxt application. The font can be obtained from https://fonts.google.com/specimen/DM+Sans?preview.text_type=custom. Select the styles to be added to the application.

Now we can add the font href to nuxt.config.js

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

Now the font can be added to nuxt pages by adding the font-family in main.css or index.vue or layouts/default.vue

body {
  font-family: 'DM Sans', sans-serif;
}