How to add a Google Font to your Gatsby + Tailwind project
While I was building the first version of itzami.com, I found myself having a hard time finding out on the internet how I could import a Google Font into my website that was using GatsbyJS and TailwindCSS. (and the tutorials I found all told me to install a dependency). With some trial and error I was finally able to achieve it and with this blog post I hope to make the job a lot easier for everybody that tries to do the same! It's incredibly easy to do it but since I haven't seen anyone mention it so clearly, why not do it myself?
First step: Grab your font!
You probably already know how to do this but let's do a refresh on it: to get a font (or font-family) from Google Fonts you must first go into the website (duh!) and choose your prefered font (I know, this tutorial is like, super high-level!). Let's pretend it's Festive.
Within your chosen font, there are a lot of styles but for this blog post I'll just pick Regular 400. Tick the Select this style and a sidebar should appear. We won't use the the
<link> but we will use the
@import so you should see something like this:
This is all you need from Google Fonts!
Second step: Paste it on
I recommend that you follow Gatsby's tutorial on how to install Tailwind on a project since it will give you all the initial files that you need.
Once you finish your setup your
index.css will look like this:
Now, on this exact file, we'll add our recently acquired
@import so your
index.css should now look like:
This is the setup on
Third step: Extend your
Now that you're correctly importing your new font, you need to be able to use it on your code via
className so you must add it customize your Tailwind configuration. To do this we'll simply extend our
fontFamily to include this new font and we'll do it on our
tailwind.config.js. This means that your file will have following structure inside
extend (among other stuff that you might have added):
Be sure to copy the exact string that you find on your Google font page on the
CSS rules to specify families section. Our
festive here is what we type when we want to style any text with this new font.
You're done, baby!
Now you can freely use your new Google Font wherever you want by adding a new class that looks like
font-festive! So, to style, let's say, an
<h1>, you would do something like:
Now make it appear everywhere!
Now that we know how to add a font to any element, it's also time to add this font to our entire app. To do so, we just need to style our
body on our
And now your entire app will appear with the new font and you don't really need to declare it on any element! Isn't that cool?
And that's it! Now you can freely add a Google Font to your GatsbyJS + TailwindCSS project with no issue whatsoever! Let me know what you thought about this post and feel free to follow me on Twitter 🤘