This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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. Web fonts eliminate the need to depend on the limited number of fonts installed on a user's computers.
Related Videos
Quick Reference
Resources
In a previous lesson,
0:00
we learned that users viewing our site
need to have the fonts we choose
0:01
installed on their computers, otherwise
the browser will not display them.
0:05
So, besides the limited number of website
fonts installed on a user's computer,
0:10
we're also able to provide our own fonts
by importing web fonts.
0:15
Web fonts are special types of fonts that
are optimized for
0:19
screen display, and they're linked to our
web pages from an external source,
0:22
then activated when needed.
0:27
So web fonts eliminate that need to depend
on the limited number of
0:29
fonts installed on a user's computer.
0:33
And there are different ways we can import
a web font with CSS.
0:35
So the method we're gonna cover here is
with an @font-face rule.
0:39
So first, I'm gonna go back to our style
sheet and I'm going to create a new
0:44
comment at the top by simply copying this
first comment and pasting it right above.
0:48
Then let's change the comment to say web
fonts.
0:53
So over in our workspace project files, we
should see a folder named Fonts.
1:00
And in the Fonts folder, we'll see three
different font formats for
1:05
the Abolition Regular web font.
1:10
Now this is one of the fonts from the
Abolition typeface,
1:13
designed by Mattox Shuler, who actually
taught a course for us on web typography.
1:16
So the reason we need to have different
file formats is because of
1:21
browser support.
1:24
Certain browsers only support certain font
formats, and
1:26
we'll get to that in just a bit.
1:29
So @font-face is what allows us to link to
each of these font formats in one rule.
1:30
Then they're activated when needed by a
specific browser or platform.
1:37
So, let's go back to our style sheet, and
we're going to link to our font by typing
1:41
@font-face, followed by a set of curly
braces.
1:47
So, the first thing we need to do is name
our font with a font family property.
1:53
So, inside the font face rule, we're going
to add a font-family property.
1:58
And we can write the font family name
however we want, because it's for
2:04
internal use in this style sheet only.
2:07
So let's define our font-face inside a set
of quotes, and
2:10
let's call it Abolition Regular.
2:15
So next we'll need to specify and link to
the locations of the font files.
2:21
So back in the Font folder of our project
files,
2:26
we should see another file named
webfont-snippet.css.
2:29
And when we open up that file, we'll see
that it
2:34
contains a code snippet that links to all
the font formats in our fonts directory.
2:37
So I'm gonna go ahead and copy this
snippet.
2:42
Then go back to our style.css file and
paste it in our @font-face rule,
2:47
right beneath the font family property.
2:53
So here we're specifying alternate
font-file formats for
2:56
broader browser support by using the
source property and
3:00
a URL value that links to the font file
location.
3:04
So let's go over the common font formats
we're using here.
3:08
So first is the EOT, or Embedded OpenType
format.
3:11
This is a proprietary format for Internet
Explorer, and
3:16
this particular declaration is for IE 9's
compatibility mode.
3:20
And the URL below is a bit of a trick that
makes
3:25
the eot font format display in older
versions of IE.
3:29
So below that, we have the WOFF, or Web
Open Font Format, and this is
3:32
a newer font format developed by Mozilla
and it's supported by all modern browsers.
3:38
Now, an advantage of using the woff
format,
3:44
besides having the strongest browser
support,
3:47
is that it loads super fast because the
data in the font is compressed.
3:49
So, sites using this woff format will
actually use less bandwidth.
3:54
And finally, the TTF or TrueType Format,
is being used here for
3:58
Safari, Android and iOS display.
4:03
So even though the browser will only load
and
4:07
use the font format it supports, we still
need to consider performance, because
4:10
embedding too many fonts with @font-face
rules can effect our page's load time.
4:14
So we need to keep these to a minimum and
only embed the fonts we need.
4:20
So next, to use the font, we'll need to
call the font-family in a CSS rule,
4:25
just like we would with any web safe font
family.
4:29
So we're gonna use this web font in our h1
and h2 headings.
4:33
I'm pretty sure you're tired of looking at
this huge Helvetica heading, right?
4:38
So let's create a new rule in our
4:42
style sheet that targets both the h1 and
h2 elements.
4:45
[BLANK_AUDIO]
4:50
And inside the rule, let's declare a
font-family property.
4:55
And at now we'll create a font stack by
listing
5:01
the desired abolition regular web font.
5:04
First, so inside a set of quotes, I'm
gonna type Abolition Regular
5:07
followed by a comma, then I'll simply copy
the Helvetica font stack in our body rule
5:15
and paste it in our heading font stack,
right after Abolition Regular.
5:22
All right, so let's save our style sheet
and let's go back to the browser.
5:28
And when we refresh the page, we're able
to see that really nice
5:32
Abolition Regular web font in our main
heading and right below in our h2.
5:36
So I think this looks much better than
what we had before.
5:42
So now that we have our main heading in
place,
5:45
let's suggest the title, right above the
main heading.
5:48
I think the letter spacing seems a little
too tight.
5:51
So we can increase the space between
letters with the letter spacing property.
5:55
So, back in our style sheet, right under
the main style section,
6:00
let's scroll down to the title rule.
6:04
And beneath the font size declaration,
6:08
we're going to add the letter spacing
property by typing letter-spacing.
6:10
And let's set the letter spacing value to
.065M.
6:17
And let's also lighten the font weight by
setting a font weight property and
6:25
a value of 200.
6:30
So when we save our style sheet, and
refresh the browser, as we can see,
6:32
this increased the letter spacing or
tracking in our title.
6:37
Now it's a little lighter and more spaced
out.
6:41
So let's do one more thing.
6:44
Let's go back and
6:45
give our title a bottom border that sort
of separates it from the main heading.
6:46
So, back in our title rule, let's add a
border bottom property.
6:51
And let's set the border width to two
pixels, and the border style to solid.
6:58
And let's also add some bottom padding.
7:04
So we'll add a padding-bottom property,
and let's set the value to 10 pixels.
7:07
Then let's scroll up to our h1 rule.
7:15
And what we're gonna do is apply a top
margin, so
7:19
let's add a margin value and set the first
7:23
value to 12 pixels, and we'll also wanna
remove the bottom margin of our headings.
7:29
So let's set the next two values to 0.
7:33
All right?
7:36
So, let's save our style sheet and refresh
our browser.
7:38
And I think that's looking pretty good.
7:42
Finally, let's give the arrow image a top
margin that gives it plenty of
7:46
separation from the main heading.
7:50
So, back in our style sheet, right under
the Layouts Styles,
7:52
let's scroll down to the arrow rule, and
7:55
right beneath the width property, let's
add a margin top property.
7:59
And let's set the value to 150 pixels.
8:03
[SOUND] All right.
8:07
So now the arrow graphic sits a little
lower in the main header.
8:09
I'm liking that.
8:14
So, again, when you're done with this
course,
8:16
be sure to watch our web typography course
to learn more about choosing and
8:18
using different types of web fonts and
creating typographic layouts.
8:22
And, check out the teacher's notes to this
video for
8:26
resources on where to find good web fonts.
8:29
You need to sign up for Treehouse in order to download course files.
Sign up