In a previous lesson,

we learned that users viewing our site need to have the fonts we choose

installed on their computers, otherwise the browser will not display them.

So, besides the limited number of website fonts installed on a user's computer,

we're also able to provide our own fonts by importing web fonts.

Web fonts are special types of fonts that are optimized for

screen display, and they're linked to our web pages from an external source,

then activated when needed.

So web fonts eliminate that need to depend on the limited number of

fonts installed on a user's computer.

And there are different ways we can import a web font with CSS.

So the method we're gonna cover here is with an @font-face rule.

So first, I'm gonna go back to our style sheet and I'm going to create a new

comment at the top by simply copying this first comment and pasting it right above.

Then let's change the comment to say web fonts.

So over in our workspace project files, we should see a folder named Fonts.

And in the Fonts folder, we'll see three different font formats for

the Abolition Regular web font.

Now this is one of the fonts from the Abolition typeface,

designed by Mattox Shuler, who actually taught a course for us on web typography.

So the reason we need to have different file formats is because of

browser support.

Certain browsers only support certain font formats, and

we'll get to that in just a bit.

So @font-face is what allows us to link to each of these font formats in one rule.

Then they're activated when needed by a specific browser or platform.

So, let's go back to our style sheet, and we're going to link to our font by typing

@font-face, followed by a set of curly braces.

So, the first thing we need to do is name our font with a font family property.

So, inside the font face rule, we're going to add a font-family property.

And we can write the font family name however we want, because it's for

internal use in this style sheet only.

So let's define our font-face inside a set of quotes, and

let's call it Abolition Regular.

So next we'll need to specify and link to the locations of the font files.

So back in the Font folder of our project files,

we should see another file named webfont-snippet.css.

And when we open up that file, we'll see that it

contains a code snippet that links to all the font formats in our fonts directory.

So I'm gonna go ahead and copy this snippet.

Then go back to our style.css file and paste it in our @font-face rule,

right beneath the font family property.

So here we're specifying alternate font-file formats for

broader browser support by using the source property and

a URL value that links to the font file location.

So let's go over the common font formats we're using here.

So first is the EOT, or Embedded OpenType format.

This is a proprietary format for Internet Explorer, and

this particular declaration is for IE 9's compatibility mode.

And the URL below is a bit of a trick that makes

the eot font format display in older versions of IE.

So below that, we have the WOFF, or Web Open Font Format, and this is

a newer font format developed by Mozilla and it's supported by all modern browsers.

Now, an advantage of using the woff format,

besides having the strongest browser support,

is that it loads super fast because the data in the font is compressed.

So, sites using this woff format will actually use less bandwidth.

And finally, the TTF or TrueType Format, is being used here for

Safari, Android and iOS display.

So even though the browser will only load and

use the font format it supports, we still need to consider performance, because

embedding too many fonts with @font-face rules can effect our page's load time.

So we need to keep these to a minimum and only embed the fonts we need.

So next, to use the font, we'll need to call the font-family in a CSS rule,

just like we would with any web safe font family.

So we're gonna use this web font in our h1 and h2 headings.

I'm pretty sure you're tired of looking at this huge Helvetica heading, right?

So let's create a new rule in our

style sheet that targets both the h1 and h2 elements.

[BLANK_AUDIO]

And inside the rule, let's declare a font-family property.

And at now we'll create a font stack by listing

the desired abolition regular web font.

First, so inside a set of quotes, I'm gonna type Abolition Regular

followed by a comma, then I'll simply copy the Helvetica font stack in our body rule

and paste it in our heading font stack, right after Abolition Regular.

All right, so let's save our style sheet and let's go back to the browser.

And when we refresh the page, we're able to see that really nice

Abolition Regular web font in our main heading and right below in our h2.

So I think this looks much better than what we had before.

So now that we have our main heading in place,

let's suggest the title, right above the main heading.

I think the letter spacing seems a little too tight.

So we can increase the space between letters with the letter spacing property.

So, back in our style sheet, right under the main style section,

let's scroll down to the title rule.

And beneath the font size declaration,

we're going to add the letter spacing property by typing letter-spacing.

And let's set the letter spacing value to .065M.

And let's also lighten the font weight by setting a font weight property and

a value of 200.

So when we save our style sheet, and refresh the browser, as we can see,

this increased the letter spacing or tracking in our title.

Now it's a little lighter and more spaced out.

So let's do one more thing.

Let's go back and

give our title a bottom border that sort of separates it from the main heading.

So, back in our title rule, let's add a border bottom property.

And let's set the border width to two pixels, and the border style to solid.

And let's also add some bottom padding.

So we'll add a padding-bottom property, and let's set the value to 10 pixels.

Then let's scroll up to our h1 rule.

And what we're gonna do is apply a top margin, so

let's add a margin value and set the first

value to 12 pixels, and we'll also wanna remove the bottom margin of our headings.

So let's set the next two values to 0.

All right?

So, let's save our style sheet and refresh our browser.

And I think that's looking pretty good.

Finally, let's give the arrow image a top margin that gives it plenty of

separation from the main heading.

So, back in our style sheet, right under the Layouts Styles,

let's scroll down to the arrow rule, and

right beneath the width property, let's add a margin top property.

And let's set the value to 150 pixels.

[SOUND] All right.

So now the arrow graphic sits a little lower in the main header.

I'm liking that.

So, again, when you're done with this course,

be sure to watch our web typography course to learn more about choosing and

using different types of web fonts and creating typographic layouts.

And, check out the teacher's notes to this video for

resources on where to find good web fonts.