Preview
Video Player
00:00
00:00
Importing Fonts
4:39Previously, we learned that users viewing our sites need to have the typefaces we choose installed on their computers. Otherwise, the browser will not display them. Besides the limited number of web-safe typefaces 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.
Previously, we learned that
users viewing our sites,
0:00
need to have the type faces we
choose installed on their computers.
0:04
Otherwise, the browser
will not display them.
0:09
Besides the limited number of web safe
typefaces installed on a user's computer,
0:13
we're also able to provide our own fonts,
by importing web fonts.
0:19
Web fonts are special types of fonts
that are optimized for screen display.
0:24
And they're linked to our
webpages from an external source,
0:29
then activated when needed.
0:34
There are different ways we can
import a web font with CSS.
0:37
The first method we're going to
cover here is the @font-face at-rule.
0:42
This method is useful if you're
providing a type face on a web server,
0:47
as I've done in our fonts folder,
0:51
where I've provided three
different file formats for
0:54
the Abolition Regular web font
designed by Mattox Shuler,
0:58
who previously taught a Treehouse
course on web typography.
1:02
The varied file formats are only necessary
if you need to support older browsers.
1:07
Modern browsers will
all accept the WOFF or
1:15
Web Open Font Format, so
we'll just import that one file.
1:19
Underneath the comment,
in our style sheet that says Web Fonts,
1:25
let's create a new font-face at-rule.
1:30
The first thing we need to do is name our
font, with the font-family declaration.
1:35
This declaration names our font so
we can use it later in our stylesheet.
1:44
We could technically call
it whatever we want, but
1:49
Abolition Regular makes the most sense
since that's the name of our web font.
1:52
Now we'll use the SRC property to point
1:58
our style sheet to
the location of our WOFF file.
2:02
Note the ../ which means
backup one folder,
2:10
from the CSS folder,
we need to backup to the root directory,
2:14
then look for
the file within the fonts folder.
2:20
We'll also specify to our browser that
this font is present in the WOFF format.
2:24
The font-face at rule only
prepared our document to use
2:35
the Abolition Regular
typeface we provided.
2:39
The typeface hasn't been applied yet
to any of our selectors.
2:43
Since Abolition Regular is a display
typeface available only in all caps,
2:47
it's not a good body copy choice.
2:53
So I'll apply it to my h1 and h2 elements.
2:56
I've provided a font stack using
3:07
web safe fonts in case Abolition Regular
3:12
doesn't load for some reason,
3:18
though it most likely will.
3:23
I've also included a font-weight
declaration to make my headings
3:28
have a normal rather than a bold weight,
3:32
since Abolition Regular wasn't
designed to be made bold.
3:35
That's what the term regular
in its name indicates.
3:39
font-weight accepts
the keywords normal and bold,
3:43
as well as a series of numerical values.
3:48
We'll look at those
numbers in our next video.
3:51
Finally, let's increase
3:55
the size of our headings
4:01
using the rem measurement.
4:06
I'm increasing the h3 size as well,
4:19
even though that one doesn't
use the Abolition typeface.
4:21
Go ahead and preview in the browser,
and you can see that our headings look
4:26
quite a bit more interesting
typographically than they did before.
4:31