Easily Load Google Fonts with PostCSS Font Magician

Instructor: [00:01] I'll install Poi as an easy webpack bundler and postcss-font-magician, and make sure there are dev dependencies. I want to create three files. I'll create index.js, styles.css, and a postCSS rc as a config file. I'll npm init -y and just accept all the defaults, so my package JSON is generated.

[00:26] From here, I'm going to run npx poi, which will fire up a server looking at that index file and refresh every time I make a change. My file currently displays nothing. If I open it up, save document.body.innerHTML, set this to a template string -- so main and h1, "Font Magician is awesome," - it's saved there. You can see my server automatically refreshes.

[00:55] The Poi grabs the styles file and compiles it. I'm going to import that. You can see right away, if I were to change h1 to a color of pink, hit save, it automatically updates. What I want to do is use a font family off of Google Fonts. I want to use the Courgette font family. We'll type that in here, Courgette.

[01:20] You'll see, obviously, that does not load in the font because I didn't configure anything at all. To configure Font Magician, I'll go to my postCSS rc, go in and quickly change the language mode to JSON since this is a JSON file, and I'll configure the plugins.

[01:41] The plugin I want to use is postcss-font-magician with an empty object for no configuration. Poi won't pick up the change to a configuration file, so I'll go ahead and stop and restart Poi. You can see right away that Font Magician is now magically loading in the Courgette font.

[02:03] To prove that's working, I can do a paragraph tag where the font family is Merriweather, and a code tag where the font family is Roboto Mono. Add some more HTML, "This was really easy," and, "Code and comments are useful." Hit save, and you can see all these fonts are loading in. Right now, that css is in memory.

[02:34] I'm going to ahead and run an npx poi build to generate the actual style sheet for a final build. If I check inside of the dist folder that that gives me and look at the final css, reformat that, you can see that it generated all the font faces I needed for the various fonts that I loaded. It generates every variation that I could possibly need, based on the fonts that I pass in.

[03:00] For Roboto Mono, if I only wanted the font weight of 400 on this and I knew I wasn't going to use the others, I could go into my postCSS rc and add some variants. I'll say that Roboto Mono only needs the font weight of 400. Hit save there. Run the build again.

[03:22] When we check the output, you can see that Roboto Mono only took in normal 400 and did not generate any of the other variations of that. By default, it's going to generate -- you can see with Merriweather -- every variation of Merriweather, unless you limit it to the one that you need specifically.