Lesson 7: Font-tastic

I've introduced you to a lot of the basics so far but basics make for an awfully dull page, don't they? In this lesson, we'll look at some of the basics for playing with fonts. Before we get started, you need to know that there are actually two ways to manage fonts on a website. The first way (which I'm going to teach in this lesson) is to hard code them into your attributes. This is realyl handy if you have little snippets that you want to change, but it's a NIGHTMARE if you want to change the fonts for the whole site. For that, you need to wok with cascading style sheets (CSS). CSS is an advanced lesson that we'll tackle in thie future. For now, let's learn the ins and outs of fonts.

Let's Get Started!

Headings

By deafult, HTML comes with a set of six heading tag paris that are designed to reflect different levels of emphasis. Heading level one has the most emphais and heading level six has the least. The tag pairs are written as <h1> and </h1>. Here's what they look like:

Headling Level 1

Headling Level 2

Headling Level 3

Headling Level 4

Headling Level 5
Headling Level 6

Headings are super handy for a couple of reasons. First, the formatting is already built-in and you don't have to mess with font sizes or weights. But the thing that is even more interesting is that ALL browsers recognizes them. In fact, the software that allows Google to crawl through your website and decide if your information is important enough to return in a search looks at your headings first. So if you want to come up in internet searches - use headings.

Changing The Font

Browser default is a font that EVERYONE has... Times New Roman. You've seen a lot of it while working through the first six lessons. Times New Roman belongs to the "serif" font family. Serif fonts get their names because they have little, triangular wings on the edges of the letters called... you guessed it...SERIFS!

In addition to serif fonts, there are a couple other font families. Sans-serif fonts don't have the serifs. These fonts are known for being more readable on a computer screen. Monospace fonts, like Courrier get their names because each letter takes up the exact same amount of space. These fonts are typically reserved for examples of computer code. Here are a few examples:

Before I show you how to change fonts, we need to back up to a little statement I made earlier. I said that "Times New Roman is a font that EVERYONE has." But what does that mean, exactly? Designing fonts is an art form and quite often, the artists who design them sell them for a profit. This means that you could buy a really awesome font for your website, but when a random user who doesn't own the font loads your site in the browser, only the default font comes up. To protect yourself against that happening, it's good practice to choose fonts for your site from the Google Fonts Library.

Pop Quiz: That link I just posted to Google Fonts... did it have a Target or not? (answer at the end of this lesson)

When you use a font from Google Fonts, you'll need two pieces of information. The first piece is the source. This is a little piece of information that tells the browser loading the page to go to the Google Fonts Library and get its information on how to render the font from there. To get this string of code, hop over to the Google Fonts Library, click Roboto, click Select this Style +, and click Embed, then click @import. Select the code in the top box. It will look like this:

  
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
	</style>

Heads Up

This little piece of code goes in the HEAD section of your page. If you look back to Lesson 3, we talked about how to create a VERY basic HTML page. Now, let's add on to it:

  
	<html>
	<head>
	<title>Hello World</title>
	</head>
	<body>
	Hello World!
	</body>
	</html>

Like the <body> tag pair, the <head> tag pair is an invisible place holder. It's job is to tell your browser, "hey, read me first!" We'll be putting all sorts of good stuff in there as we go, but for now, let's add that refernce to our font source.

  
	<html>
	<head>
	<title>Hello World</title>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
	</style>
	</head>
	<body>
	Hello World!
	</body>
	</html>

Oncce the source link is in the head section, any browser that accesses your page will have instructions on how to display the font you've chosen.

Ch-ch-ch-ch-ch Changin'

Now it's time to change some text so that it displays with a new font. To do this, we're going to use the <span> tag pair and an attribute called "style." Think of a span like using your mouse to highlight a section of text. Once the text is highlighted, you can do all sorts of stuff with it. Here's an example of the code:

  
	<p>I'm going to change the font to <span>Roboto</span>.</p>

So far, nothing to see. <span> is another one of those invisible tag pairs. Here's what to code looks like on the browser side:

I'm going to change the font to Roboto.

Let's go ahead and add that attribute, shall we? To do that, we're going to hop back over to the Google Fonts Library. Select the code in the lower box (CSS rules to specify families). Now, let's add a style attribute and paste it in.

  
	<p>I'm going to change the font to <span style= "font-family: 'Roboto', sans-serif;">Roboto</span>.</p>

Here's what that looks like on the browser side:

I'm going to change the font to Roboto.

Styles and Bigger Chunks of Text

The example we jsut worked through uses the <span> tag pair to change one word to a different font. But what if you want to change an entire paragraph? Luckily the paragraph (<p>) tag pair allows for the same style attribute that we used with <span>.

  
	<p style= "font-family: 'Roboto', sans-serif;">This is the song that never ends. And it goes on and on
	my friends. Some people started singing it not knowing what it was -- and they'll just keep on singing 
	it forever just because...!</p>

Here's how that lovely little ear worm looks on the browser side:

This is the song that never ends. And it goes on and on my friends. Some people started singing it not knowing what it was -- and they'll just keep on singing it forever just because...!

Lesson 7: Prove it

We've tackled a lot of new subject matter in this lesson, so let's get fdown to practice:

When you are done, save the file as MyLesson7.html and upload it to the folder with your name. You can check your work here. If you want to see an example of how this file might look, you can check mine out here.

Back to the lesson plan.