There are browser default styles for fonts, but you can use CSS to change that. In this video, learn how to update your projects to customize the font family and font-size.
- [Instructor] The first thing we'll do in this exercise is update the font family. So I have my project file open in the browser and the Google Font site. I'll be using two fonts, Open Sans and Caveat. Since I already know which fonts I want to use, I'll just do a search for them, in the search bar on the top right hand corner. Open Sans, click the plus icon to add it to my collection, and Caveat.
Your fonts are added to a collection in this bottom drawer. Click the bar to open the drawer and copy the standard embed link. This should look familiar since it's using the same link tag we use to add our CSS file. This snippet will actually link to Google Style Sheet, and this is how the font families are loaded onto our webpage. So copy that entire line and go back to your editor, and let's add it to the head section of our index.html file. Back in your text editor, add the code snippet to the head section of your index file and put it right before the styles.css file.
This way it will load first before it loads our custom style sheet. Now that our new fonts are loaded into the page, let's set a new default font family. Back in styles.css, let's add the font to the body selector, because I want the elements nested within the body tag to inherit this style. Remember, we always start with generic styles first and then we'll make it more specific as needed. Back in Google Fonts, in the drawer at the bottom under Specify in CSS, we can copy the font family rules here to use our new fonts.
I'm going to use Open Sans in my body selector. Save the file, and let's check our page. Now my font has changed to Open Sans for all of the text within the body tag. Next I want to change just the h1 and h2 headings to use a decorative font. I can use the type selectors h1 and h2, and combine them as well, to set the same font family for both.
I'm going to add these under my global styles, since I want to target all the h1s and h2s on the page. I can use type selectors h1 and h2 and combine them with the comma. And that way I can set the same font family for all the h1s and h2s on the page. I want to use my Caveat font for this one, so I'm going to go back to Google Fonts and grab the code. Save the file. And let's check our page.
I like to check my page after adding one or two CSS styles, just to make sure everything is applied properly before I move on to adding more styles. And as you can see, all my h1s and h2 now have the Caveat font. In general, headings are usually styled to be larger than the body text. So I'm going to update the font size and make the h2s a little bit bigger, since they're used as headings for each section. I'm going to continue to add this in my global styles, since again, I want to target all the h2s on the page.
So I'm going to set mine to 40 pixels, using font-size. Let's check that again in the browser. And now we can see the h2s are larger than the body text. In general, the header is used as an introduction to the page. So I want to make these headings stand out a bit more than the rest of the headings on the page. I'm okay with leaving this h2 here the same size, but I want to make the h1 a lot bigger.
Let's go back to our CSS file and update that. H1. I'm going to set mine to 80 pixels. Let's go back to the page, and there you go. Your page should look something like this. There's still more to add, like revising the spacing around these elements, and aligning the content, but it's starting to slowly come together. In the upcoming lessons, I'll be going over more font related styles, but in the mean time, feel free to play around with the font family, or font sizes of the other headings or body text, if you wish.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property