How to add a new font with Google Fonts!
Let’s get down to business, you wanna know how to add sweet fonts to your webapps and I’m here to show you how. Let’s go!
Step 1. Browse Fonts!
Head on over to fonts.google.com. Browsing fonts with Google Fonts can be an unexpected amount of fun, but also an unexpected amount of time in CSS limbo, testing to see which font works best for a project. Lucky for us Google Fonts has a nice feature that let’s us test a little bit of writing.
Step 2. Got it!
So now you’ve sorted through the endless amounts of fonts available to you and settled on “the best.” Now let’s see what information google gives us.
To the left in the Selected Families section, you can see two fonts that we’ve chosen to use in our project. Further down, in the Use on the web section, you’ll see the ways we can bring these fonts to our webpages.
The first thing to do this is to link the given href into the <head></head> of your index.html page. It really is as simple as copying and pasting. From there the font will be linked to your project, all you need to do is to use it in your actual CSS. If you’re interested in how these keys get developed, they break it down quite nicely on their CSS API docs.
When using the CSS rules, be sure that all of your html elements have the proper classnames assigned to them. This will not only help your workflow but also give you more time to focus on the fun parts of CSS.
