Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way they do, and how fonts affect the look of a web page. Author Laura Franz covers common tasks, including downloading a font from an online source such as Typekit or Font Squirrel, implementing the font in HTML and CSS, and changing the size and line-height to improve the readability of text. The course also covers different periods of type design and explores the history behind handwritten fonts, text fonts (used for large amounts of text), and display fonts (used for headlines).
Now that we've picked an old style font, it's time to apply it to our Web page. Start by opening the original_city_site file georgia_site.html in your preferred text editor. We're going to save this file as crimson_site.html, and you can save it in the same folder, because we won't be overwriting anything. Now we have crimson_site.html. Now, I like to be able to see the files that I have open in my text editor, so I'm just going to go ahead and do that, because what I'd like to do is load your HTML document into your browser, and take a look at it.
Right now, even though it's the crimson_ site.html, it is still showing up in Georgia. So what we need to do is go to Google. We're going to use the Google Web Font here, and we can see there are hundreds of fonts to choose from, but we know which one we want; we want Crimson. We can see that it has six fonts and styles, including a semi bold, and a semi bold italic, which is very nice, because I didn't care for the bold italic when we first looked at this font. So I am going to click on this again to just close it up and then we're going to Quick-use this font, so click on Quick-use, and we can choose what styles and weights of the fonts we want to use.
We need normal, and normal italic, and let's try the semi-bold italic for the sentence about the Bay Road businesses, and then let's try the bold for our headings. And those are the weights and styles we want to use in the font. Now, if you look over here, you can see that the page load is in the red zone. That means this is a pretty memory intensive font. If we go and turn off one of our weights or styles, we can see over here that it is still in the red zone. So we need to keep an eye on this. If the font loads too slowly in our page, we might want to go back and choose a different font, but I think we'll be okay with only one memory intensive font.
We just would not want to pick two or three to put on the same page. If you scroll down, you can see that Google Web Fonts gives us some syntax to use so that the fonts will work. I've selected it, and I'm using Command+C to copy, and let's go back into our text editor here, and we need to put that code into our document, and again, it should be the first item in the head of your HTML document. Go ahead and save this. Now we're telling the browser that it should go to Google Web Fonts and get this font for us, but we haven't told it yet to actually use the font.
We're still using Georgia down here. So let's go back to Google Web Fonts, scroll down a little bit further, and we can get the font family name here. Crimson Text, and I also grab the comma, I'm copying it, and back into the text editor with the font family. So now the universal selector has been changed so that the font used in this page will be Crimson Text, and if it doesn't work, then Georgia will load. Go ahead and save this again. We can go back into our browser. We can go to our tab here for this page, and we can reload it, and it works.
Everything is set in Crimson. That was easy!
There are currently no FAQs about Choosing and Using Web Fonts.
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.