Adding Custom Fonts to Tailwind
In this lesson, you will learn about Tailwind’s default typography choices and how to customize them using your own custom fonts. This lesson will teach you different ways to import the fonts you need for your next project.
The code for this lesson is divided into two sections; you can see the progress on the code.
Instructor: [0:00] To customize our app's typography, we need to start by loading the fonts we want to use. Discord uses two fonts. One is Whitney for the base text, which we can see if we hover over one of these elements. This will show us that the base font is 16 pixels and Whitney.
[0:19] Then we have some title fonts here. Right here, we're using Ginto. Over in our app, we'll add Ginto and Whitney, but because they're premium fonts, we'll also add Open Sans as an open-source fallback.
[0:33] The first step is to load the fonts. I'll come over to my desktop, where I have the fonts here, and then I'll drop them right here in my project's public folder. You can see, we have one weight of Ginto, and we have four weights of Whitney.
[0:49] Next, I'll create a styles.css file, and I'll paste in all the @font-face rules. Then, because this is the next project and I want these styles available globally, I'll just come over to myApp.js and import my new style sheet.
[1:09] At this point, nothing's changed, but if we've wired this up correctly, we should be able to just drop a <div> right here and set the font-family directly on the <div style attribute="Whitney">, and see a change right there. Indeed, it looks like Whitney is now rendering here.
[1:31] Similarly, if we were to use Ginto, we should also see that work as well. Now, let's come over and make a new file called document, which is where we'll load our open-source fallback. In Next.js, the base document looks like this, which just gives us a <head> tag here.
[1:50] Because the Open Sans font is on Google fonts, all we need to do is just paste some <link> tags that we got straight from Google fonts. You can see right here we're loading the Open Sans font.
[2:03] If we come back to our app and try out Open Sans, we should see yet another font right here. Indeed, we do. All three of our fonts are being loaded into our project now. There's lots of ways to load fonts depending on what tools you're using.
[2:20] Now that our fonts are loaded, we can customize Tailwind to consume those fonts. The way to do this is to head on over to tailwind.config. Under Theme extend, we're going to extend the font-family module.
[2:37] By default, Tailwind applies the Sans font-family to our whole site. If we just overwrite this with Whitney, then like magic, we'll see all of this text default to Whitney. That's exactly what we want, so that's a great starting point.
[2:57] It's best practice to specify fallback fonts in case users can't get your preferred font for whatever reason. We can do that in tailwind.config using an array. After Whitney, we'll go ahead and add Open Sans.
[3:12] Let's just say you're not using Whitney and Ginto, or the user couldn't load it. We'll just comment out this import as if these fonts weren't loaded, and we'll see here that now Open Sans is being rendered.
[3:26] We can verify that by inspecting one of these elements, how many computed, and seeing that the rendered font right here is Open Sans. We'll go back to Whitney.
[3:41] Just to button this up, we actually want to add the rest of Tailwind's default Sans stack to the end of this list. Basically, we just want to append Whitney and Open Sans to the default stack.
[3:51] We can do that by coming up here and importing the default Theme directly from the tailwindcss npm package. Then down in our Sans declaration, we can splat the array of the defaultTheme.fontFamily.sans.
[4:14] We're still seeing Whitney rendered, but to verify our fallbacks made it through to the actual CSS declaration, we can just take a look and see what the font-family rule is for this element.
[4:28] There we see it's Whitney first priority, then Open Sans, then UI Sans Serif, and the rest of the default stack. We've updated the base font that's used for all of our text in our app, but we have one more font to add.
[4:42] Let's come back to our tailwind.config, and we'll just define a new key here. This can be whatever we want. Let's call it 'title' since it's used for titles in this app. We'll basically do the same thing.
[4:54] We want to use Ginto first, Open Sans second, and because Ginto is a Sans font, we'll go ahead and grab the default Sans stack as well. These keys give us the font Sans and font title utility classes.
[5:14] We didn't have to explicitly use Font Sans because Tailwind applies it to the root. If we go ahead and open our index page and find this piece of text right here, now we can add font title. Let's go ahead and add font title.
[5:31] We can see right there the IntelliSense has already picked up our custom key. Just like that, now we have Ginto as a title font in our app. If we alt-tab back to Discord here, we can see our clone is starting to look much more like the real thing.
[5:52] It's pretty incredible how much of an effect these fonts have on your UIs. We can even see the server title in Discord is white. The channel titles here are using a slightly bolder font weight. Let's try font medium.
[6:16] Again, just some tweaks to show you that Tailwind is an engine for creating your own app's design system. Here we are able to match this production app perfectly so far.
[6:29] Just because Tailwind ships with default values for typography, doesn't mean you should be afraid to customize them on your own. Being able to tweak Tailwind exactly in the way you need for the UI that you're building, is one of my favorite things about Tailwind.