- Read Tutorial
- Watch Guide Video
Now the next thing I want to do is to bring in a custom font and walk through the process for doing that. So the very first thing I'm gonna do is to go to Google Fonts. So you can just go to Google and type Google Fonts, and I believe it's also fonts.google.com.
So if you go there then you can pick out any font that you want. Now, remember, because this is your portfolio you should pick out something that you want for your own application. I'm personally going to pick out one that I've used before and I really liked it. So I'm gonna search for it up here.
And it's called something like Titillium Web, I believe. Yes, there it is, Titillium Web, and click on the little plus sign, and once you do that it's gonna say that a family is selected down here.
Open that box, and you'll see that it has all of the code that you need in order to bring this in.
So we have a couple of different options. We can bring it in, and this is probably the easiest way to do it, so this is what we're gonna do is to simply bring the font link in and we're gonna put this inside of our index.html file. Remember, that's that file that's technically the entry point for our entire application, it's just a static HTML file that the rest of our React code sits in.
So I'm going to copy this code, switch over into Visual Studio code, and if you forgot where it was, don't worry, we haven't accessed it in a bit. It's not in the source directory, it's inside of your static directory, click that, and then click on index.html.
And then from there, you can just add it right above the title, and then make sure to remove this demo one that we had in place in the template. So remove that Montserrat one, hit save, and now we can access it. So just to show you the way whenever I'm adding a new custom font I rely on Google Fonts quite a bit and one thing I like about it is they actually give you all of the instructions you need.
So right here I can just come and select all of this code.
font-family: 'Titillium Web', sans-serif;
So I'm gonna copy this, and moving back into our base file here, I want this to be the base font that we use in the application. So inside of the body, I'm going to hit save here, and now if we go back to our application, and you may or may not have to hit refresh, you can see that we have this nice, new font here.
And this is gonna be the font that we use for most of the application, but feel free to mix and match, and to use your own font so that it has your own unique look and feel, that is all you need to do to add custom fonts into your React application.
Just to review, you first go pick out the font you want, import it into the index.html file, then from there you can call it from any of your style files, and you can also follow the instructions on Google Fonts.