How to add Google fonts in Next.js - Next.js + Headless WP [part 19]

Aug 15, 2023

How to add Google fonts in Next.js - Next.js + Headless WP [part 19]

This video shows you how to change the font in a Next.js site using the font module, which comes with the ability to self-host the font files. We’ll replace the default fonts with a pair of Google Fonts.

Website: https://codingreflections.com
---------------------------------------

Server providers:
Linode: https://codingreflections.com/go/linode/
DigitalOcean: https://codingreflections.com/go/digi…
-------------------------------------------------------------

Disclaimer:

This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate.

Disclosure:

This video and its description may contain affiliate links, which can earn us commission if someone purchases products using those links.

Content

0.18 -> welcome to another episode in our next JS headless WordPress series currently our site is using the

5.46 -> default fonts that means there is no consistency between the different operating systems like

10.74 -> Windows Linux Etc so in this video I will show you how to change it and use a Google font instead in

17.82 -> order to set up fonts there is a module the font module and it has several optimization features

24 -> for instance it allows you to sell host the font files which helps in avoiding external requests

31.32 -> it can work with Google phones as well it can download the font files from Google servers and

37.5 -> host it in your next Chase project directory and serve it from there and when it comes to loading

43.86 -> the font files there are a couple of ways to do that you can either add it to the app.js

48.66 -> file to use it on all the pages then export the component wrapped inside another element

54.06 -> with that class name speaking of the phones there are two types of phones available in Google fonts

61.02 -> variable fonts and non-variable fonts here Roboto is a non-variable font and for non-variable fonts

67.98 -> you have to define the weight as well when loading it whereas for variable phones you don't need

73.68 -> to specify the weights it's all in loaded in a single file also if a phone has a space in its

80.04 -> name you can replace that with an underscore when calling the function an alternative to using the

84.9 -> class name is to add a style attribute to the Head section and then set the font family property and

91.14 -> finally if you want to use the font in a single page only then import the required font file in

96.9 -> the route file itself then call it with the class name or by setting the font family property in a

103.32 -> style tag okay now let's go to the Google fonts website to pick a font for our website at the top

108.9 -> itself you can see a checkbox that allows toggling between variable and non-variable fonts currently

115.08 -> there are about 1490 font families in total and out of these around 298 are variable the advantage

125.82 -> of using a variable font is that you can use any variation with just a single font file there is

131.76 -> no need to download multiple font files for bold italic regular thin Etc just a single file which

138.3 -> is better for performance with variable weights there is no need to limit yourself to fixed values

144.96 -> like 314 400 for regular 700 for bold like that okay with that in mind let's pick effort I am

153.66 -> going to use the Rubik font which is a variable font let's take a look at the font page to see how

158.4 -> the variable font mechanism is working go to the type tester tab then slide the weight and you can

165.06 -> see how the thickness is changing as I drag the slider you can use any values between 300 and 900.

173.22 -> you can also go with the predefined values like bold 700 regular 400 like that

179.16 -> if you want and above that there is also an option to enable or disable italics

185.16 -> okay back to the code editor I plan to use the font within the single post page that is the post

190.8 -> slug.js route so the first step is importing the font from Google fonts so import Rubik

199.68 -> from next slash font slash Google but in order to use this you need to ensure that the next

207.78 -> font module is installed for this project I have it already installed you can see it in the package

214.5 -> Json file it should be already available if you are using the latest version of next JS otherwise

221.1 -> you can install it from npm so if it's not already installed just run the command npm installed

230.52 -> next slash font also in the latest version there is no need to add the add symbol in front of the

238.02 -> module name once it's imported you can call the font function and assign it to a constant

244.56 -> we want to get the Latin subset so add Latin to the subsets property

251.94 -> you can also set the display property to swap the default value will be optional

256.74 -> change it to swipe to make sure that the font is loaded correctly

263.82 -> okay then output it to the console to see how it works it should be an object

273.06 -> however when I checked back on the page there is a server error so let me try refreshing the page

283.86 -> but still the error is there so let me try restarting the development server by running

289.38 -> npm run dev then check the webpage again reloading the web page and this time the

297.42 -> error is gone now I want to open the inspect element tool then go to the console tab to see

302.94 -> how the font object looks like here is the object it has two properties class name and

308.82 -> style and you can use this class name to assign the phone to the elements you want within the

314.7 -> style property we have the font family and the font style you can use this font Family Value

319.02 -> inside custom CSS within a style tag if that's how you prefer to use it okay I want to assign

327.36 -> the phone to our whole article so let me set the class name attribute for the article tag

333.96 -> article class name equals then inside a jsx block let me call the class name using rubik.class name

342.24 -> back to the webpage you can see that the phone has already changed select the inspect element

348.12 -> tool and hover over the element and you can see that the font is now Rubik so it's working

355.26 -> checking the styles on the right side

359.04 -> you can see how the font family property for the class name is set to Rubik and here you can see

365.16 -> the class name assigned to the article tag the class names are dynamically generated and the

370.5 -> font module can automatically add the necessary CSS rules as well okay next suppose I want to use

377.58 -> a different font for the heading so how to import a second font that's what we are going to discuss

383.28 -> next so once again let's go to the Google phones website to pick a different font for the headings

390.84 -> and I think I can go with the Roboto slab font it's a variable slab font

399.84 -> so in addition to Rubik import Roberto's lab as well Rubik comma robot or slab

407.88 -> you can see how the space in the name change to underscore now below that we want to call

413.28 -> the Roboto slab function and assign it to a constant called Roboto by the way make sure

419.28 -> that the function name and the constant name are different here we are using lowercase letters for

425.28 -> the constant name while the function name has the first letter of the word in uppercase okay

433.86 -> since Roboto slab is also a variable font we need to set only the subsets value that is Latin subset

441.42 -> and also the display value set to swap okay now we are ready to use

447.12 -> the robota slab font in our code and I want to assign it to the H1 heading tag

455.28 -> so convert the class name value to jsx by putting it inside curly brackets

463.32 -> and changing the double chords to back text

470.7 -> it allows you to use variable inside class name

477.84 -> now we can call the class name variable robota slab dot class name okay let's go back to the

486.12 -> webpage and check if it's working however the change isn't yet visible I think there is some

491.64 -> delay in downloading the font from Google servers so let me try reloading the page

497.52 -> okay now it's working you can see that the title is now using the robot or slab font while the

504.48 -> rest of the page is still using the Rubik font now let's consider another case suppose I want

510.12 -> to use robota slab for these list elements as well there is no direct way to Target the list elements

516.12 -> because it's within the content area and the content is fetched as a whole from the WordPress

521.34 -> graphql API so we need to Target it using the post content class assigned to the content area

527.52 -> in other words there is no way for us to use the class name like we did just before instead we have

533.7 -> to set the font family property manually using some custom CSS code inside a style tag and I

541.38 -> want to add the style tag to the Head section of the page within the style tag open a jsx block

548.04 -> wrap them inside back text to preserve the line breaks

552.9 -> and within the Matrix we can Target the list element using the class name of the parent

557.34 -> element that is dot postcontent UL then we can set the font family CSS property

567.66 -> set its value to the variable robotoslab dot style dot font family

577.62 -> now going back to the webpage and you can already notice that the list items are using the robot or

583.8 -> slab font so the inline styling is working checking on the right side under the Styles

591.72 -> section you can see that the font family for post content you will is set your robot or slab

597.9 -> whereas the remaining elements are still using Rubik such as the paragraph elements hyperlink

603.66 -> Etc okay I think that's all for this video but there is one thing I must mention here initially I

610.26 -> had a hard time getting the font module to work I got some weird alerts like this and the fonts were

615.66 -> not loading properly especially in the development mode so I had to actually build the site and then

622.02 -> start the production server and then the phone started working still I am not sure why the arrow

628.56 -> rocket but in case you are also facing the same issue you might want to try building the site

634.56 -> I think there may be some issue when the module is trying to download the font files

639.54 -> from the remote server even when trying to run the build command I got some build errors

650.94 -> the error message says fetch failed so it must be a network issue without making any further

659.46 -> changes I just tried to build the site again using nbm run build and this time it worked

667.26 -> most probably it must be an error from my side and there may not be anything wrong

672.84 -> with the module itself okay in the second attempt the build completed successfully

678.18 -> so let me start the production server using nbm Run start

683.28 -> then checking the web page reload the page and now everything is working as expected both the phones

691.2 -> are loading correctly Roboto slab and Rubik and during the build process I have already set that

697.38 -> next will download all the required font files as well as generate the necessary CSS and store it

704.46 -> inside the static folder what you are looking at now is the CSS file generated by the font module

711.66 -> you can see the names Roberto slab and Ruby being used inside the style sheet

724.74 -> you may also check the Chrome Network tab to see where the phone files are actually downloaded from

730.8 -> and it's downloaded from the localhost server itself there is the same server

735.6 -> not from the remote server and speaking of the font files it's stored inside the media directory

743.82 -> I hope it's clear one last thing I want to mention is that if you are using the latest

748.98 -> version of next JS then there is no need to use the at symbol in front of the module name

756.36 -> and as I am recording this video next yes is at version 13.2.4 here is the default webpage that

763.98 -> comes along when you install next JS the first time and in that it's using the entire font which

770.52 -> is another variable font and this is how the font class name is set for the various elements

776.1 -> in this case a paragraph element okay I hope now you understand how to change fonts in the next

781.68 -> JS site using the font module I hope the video was useful thanks for watching see you in the next one

Source: https://www.youtube.com/watch?v=CoSHOb2GauQ