Add Font To Nuxt

Add Google Font to Nuxt Js Application

A google font can be obtained from For example, to add DM Sans font to our Nuxt application. The font can be obtained from Select the styles to be added to the application.

Add Font To Nuxt

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: ",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;



Join Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.