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; }