Join Chris Converse for an in-depth discussion in this video Importing a Google Font, part of Creating a Responsive Web Design.
- So now we're ready to start working in our CSS file and transforming the way the HTML looks in the browser to match our design. So the first thing we're going to do is go back to our Project Folder. Let's find our CSS folder and let's open the Screen.CSS file up in our text editor. Now as I mentioned before there are no rules inside of here. I simply made these files to make sure that we all had a proper text file to use as a CSS document. Now for this particular site I want to use a Web Font. And we're going to use a Web Font from Google and Google has the option of letting us use something called an @Import.
Now it does have to be the first line item in our CSS. So that's the first thing we're going to do. So I'll switch over to my browser here. I'm already on the GoogleFonts website which is google.com/fonts. Now there are many fonts services you can use some are free, some are commercial. Everything on GoogleFonts is free. So I'm going to come down here and let's search for the word open. I want to use the font called Open Sans. So I can see it right here at the top. And I come over here and I'm going to click this button here called Quick Use.
That's going to bring me to the Profile page for this particular font. So now here in section one I can choose all the fonts I want to use. So I want to use the Light and Light Italic, and Bold and Bold Italic. Now as you pick the individual fonts in the left you can see the approximate Page Load over here. As long as you're inside of the green area here you're not adding too much to your Page Load. Let's scroll down. I'm not going to choose any additional languages. In section three I can choose how I want to import the font.
So here we can see the name of the font as Open Sans and then they also specify Sans Serif as well. So with this selected, I'll copy that to the clipboard. Let's switch back to our CSS. And let's start by adding a body element. So we'll type body space put in our beginning and ending brackets. And the first thing I'll do is paste in Font Family Open Sans, Sans Serif. With that defined let's hit a space. Next we'll set font size to 16 pixels. This is the only time in this CSS file we're going to specify the font in pixels.
From here out, we're going to specify the Font in terms of ems. Ems are proportional measurement and the measurements are going to be based on the based font which we're defining here as 16 pixels. And this will allow all of the individual devices to scale the font a little bit more or less for their individual resolutions. Next we're going to specify Font Weights. We're going to use 300, which we'll use as the normal weight based on the fonts we brought in from Google. Then a space. Next we'll specify color.
This is the based color of the font. We'll do a # sign and three 5's, that's going to be a medium gray, space. Then we're going to set margin to zero. Then we're going to set padding of zero. That way, anything inside of the body element will touch the edges of the browser. So with this in place, save your work. Let's go back to the browser. Let's hit Reload. We can now see that our font is kicking in. And we can see that the content inside of the browser is touching the edge. That's from the margin and padding.
And then as we scroll through, the based font is this medium gray. And all of the text is showing up in Open Sans. So now with our font properly being brought in next we're going to work on our based Text Styles.
The exercise files for this course are free to all members. Download them and start creating your own responsive websites today.
- Planning your layout
- Creating HTML containers, content, and links
- Creating and styling the layout with CSS
- Creating a menu system
- Styling headings, body text, and footers
- Styling and repositioning navigation links
- Swapping high-resolution graphics for Retina displays
- Making sure content is printable