How to Add Google Fonts to a NuxtJS Project

hey what's going on guys in this video i'm going to show you how to get google fonts in your nuxjs project so i got a next.js project open here it's a little website that i whipped up a while ago about ai books really cool stuff but i don't like the font that default loads on chrome and i want to change it specifically i want to change this section here the font that i want to change it to is a google font in this case it's one called inter one of my favorite fonts ever developed by rasmus anderson so this one right here now in order to get this loaded and up and running it's actually incredibly easy all you have to do is look for the google fonts next npm module it's this link right over here i actually already have it open in this tab it'll likely be somewhere on top of google if it's not just look for at nox js slash google dash fonts once you're on this page all you have to do is npm install this module so at nox js google fonts i'm going to go in here and type npm install at nox js slash google dash fonts it's just in the root of my project that's going to take a little while to install so what we're going to do is we're actually going to configure the next dot config options here all you have to do is add this to your build modules object so if we go to our next.config.js there's a build modules object here all you have to do is type at nuxjs slash google dash fonts awesome i'm going to give that a quick save and the last thing you need to do is you just need to create this google fonts object and i'm going to do that right underneath right underneath this build modules uh this other build modules object so for this all we have is google fonts a little colon here then we have uh little curly braces families then inside that we have enter and then we have an array with the font weights that you'd like in my case i'm using font way to 300 500 and 700 so if you go ahead and save that get a live server running here so it's going to take a little while to build but if you go ahead and save that you can go into the specific component that you want to add that font to in my case i'm using the home hero component and then get rid of that feel free to create a class in my case i'm going to use one called font display where i type the font family in as inter we'll have a fallback font a swap font here of sans-serif so that'll just be the default font that's used on the browser then i'm going to oh it looks like i actually already typed this in here let me get rid of that then all i'm going to do is i'm going to add it to the html document or rather the html i guess object that i'm uh that i'm looking to add this font to so in this case it's this h1 i'm going to add the class of font display if we go back to our project here you'll see that font apply okay so if we go take off font display give that fonts will disappear if we add that back in font will appear again and of course i actually really like this font so i'm just going to add this as the top level font for basically every element underneath it but that is how you install google fonts on a nuxjs project if you guys want to switch up the font you don't just have to use enter feel free to browse pick whatever you want but the core of it is creating this google uh google fonts object here with another family's property and inside of that an inter uh array sorry not an inter array rather an array that includes the name of whatever font you want so if i wanted to include lato i could do that i wanted to include monstera i could do that also make sure that you specify the font weights that you want to use because this is important and obviously rendering it out on screen i hope that was helpful guys if you have any questions feel free to let me know in the comments more than happy to help

Channel: Saraev Media

Views: 694

Rating: 5 out of 5

Keywords: Nuxtjs, google fonts, nuxtjs google fonts, nuxtjs add google fonts, nuxtjs google fonts install, nuxtjs install google fonts, @nuxtjs/google-fonts, install google fonts on nuxtjs, nuxt google fonts, nuxt install google fonts, google fonts nuxt

Id: CZ6wH6izpOA

Length: 3min 57sec (237 seconds)

Published: Tue Feb 02 2021