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
[code language=”javascript”]
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",
},
],
},
}
[/code]
Now the font can be added to nuxt pages by adding the font-family in main.css or index.vue or layouts/default.vue
[code language=”css”]
body {
font-family: ‘DM Sans’, sans-serif;
}
[/code]