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.
Table of Contents
If you want to add custom font or want to add a font locally in your nuxt project, check out our previous post here
How to get Google font link
Step 1 : First go-to fonts.google.com 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="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,300;1,500&display=swap" rel="stylesheet">
How To Add Google Font Link In your Nuxtjs Script Tag
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: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,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.
<style>
html {
font-family: "Roboto";
}
</style>
Or, if you want to use the font globally just add it in your layout/default.vue page.