Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last lesson we chose our web font PT Sans from Google fonts. In this lesson we will add the Google web font syntax to our web page. You see our font family for the page is currently Arial. All text is the same size. The only difference is the heading is bold. We are going to change the font to our chosen web font, PT Sans. Go to google.com/webfonts, find your chosen font., I am going to use the Command+F for find and we're looking for PT Sans.
Some fonts have more than one version. PT Sans has a narrow font and a caption. You can see here the x-height is a little bit bigger and it's a little bit looser, so it would be great to use a really small type. But we are looking for the regular PT Sans. Click on it. We have seen this page before. this is the page where we can see what the font looks like. We can also choose to use this font. Click on that link and you will see we can choose what variants we want to use within our web page.
Only choose the ones that you need , because the more you choose the longer it will take to load. We need regular, we need italic for our titles and we may bold for some of our hierarchy. We are using it now for our h1 so we will click that as well. We are not going to choose bold or italic because I don't expect we are going to use it. If we change our mind, we can always come back and do this process again. Select the syntax here in this box. I did that by triple clicking and then I'm going to copy it.
I am on a Mac so I will use Command+C to copy. Then I am going to go paste it in my file. Open your HTML file. Paste the syntax as the first element in the head of your document. It's important to put this first. If you don't it won't work in every browser. Let's save this page and review it in our browser. Refresh. But wait! It didn't work. Why not? Because we put the syntax that we need to access the font in our HTML file but we didn't change our font family in our CSS file.
Let's go back and do that. We are going to place the font family, up here where it says Arial. We are going to change it in our universal selector to the PT sans. Now I'm not exactly sure how to do that font family, so I am going to go back and get that syntax from Google web fonts. Right down here it gives me all the syntax I need,.I copy and paste whenever I can to avoid errors. So now I can see my font family is PT Sans, Arial, serif. The PT Sans uses a single quotation mark around it because there's a space.
You may notice that a lot of web designers will put the single quotation mark around these font families even if there isn't a space, even though it's not required, it's not necessary, but it's a good habit to get into. Our font stack says if for any reason this font doesn't come in, to use Arial. Now usually I would use Verdana. I think it's more legible sans-serif font. But I did some testing and Arial and PT Sans actually have a really similar x-height and a similar width to their letters. So if for reason PT sans doesn't work and Arial comes in I know my text will still looks similar. It looks more similar than if I used Verdana, so I am going to go and keep it there.
But I am going to change this last one. For some reason their third font in this tag is serif but I want to sure my page doesn't end up looking really traditional. So I'm going to change this to a sans serif and you'll notice that my syntax that I copied and pasted, it gave me an extra curly bracket there, so I will delete that. You will also notice in the syntax that I copied the h1 with a opening bracket, but I'm not setting my h1 here. I am setting my universal selector and that's what could cause some problems for me.
So safe this and let's review it in our browser. You have successfully used Google web fonts to add a web font to the page. In the next lesson we will choose the second Google web font for our h1.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.