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
Now that we have some general knowledge about typography, let’s install some shiny, new fonts and look at what to consider when choosing a typeface.
Resources
Font websites
- Google Fonts - large directory of free fonts, all available as web fonts
- Font Squirrel - free, even for commercial use. mixed quality.
- MyFonts Top Web Fonts - large directory of fonts
- Lost Type - high-quality fonts, some available pay-as-you-want for personal use
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
With all this talk about fonts,
0:05
you're probably itching to get
some new ones of your own.
0:06
You're probably familiar with the standard
set of fonts that come on your computer.
0:10
These are called system fonts and
Android, iOS, Windows, and
0:15
Mac each have a different selection.
0:20
These are immediately
usable on your computer,
0:23
although there's a relatively
small selection.
0:26
If you do decide to design
with those system font,
0:30
when it's time to develop it with code,
you can either find a web font that allows
0:33
everyone to see the font,
even if they don't have it installed or
0:37
you can create what's called
a font stack in your code.
0:42
It's a list that tells
the browser which fonts to use.
0:46
For example, you may prefer Helvetica,
which is available on all Macs but
0:49
not all Windows computers.
0:54
So you can add Ariel as a fallback
0:57
which is available on nearly
every Windows computer.
1:00
Luckily system fonts
aren't the only option.
1:03
There are tons of fonts available for
download and they're easy to install.
1:07
Here's how to install a font.
1:13
Find a font foundry, or
a font distributor website.
1:15
Then sort by the features you
are looking for, more on that later.
1:19
When you find the one, download and
install it on your computer.
1:24
You may notice there is more
than one file per font style.
1:47
This can happen if there
are different formats.
1:51
Here are the common font formats OpenType,
TrueType,
1:55
EOT, WOFF, WOFF2, and SVG.
2:01
Files with an OTF extension
are open type fonts.
2:06
This is the preferred format because it
includes the most customization options,
2:10
and has widespread
support across platforms.
2:15
Files with a TTF extension
are true type fonts,
2:18
this is what was used before
the open type format.
2:22
While they still work well, they don't
have the extras that open type fonts have.
2:27
Files within EOT extension use
a format created by Microsoft.
2:33
They're meant to be used on the web,
however,
2:37
they only work in Internet Explorer.
2:40
WOFF files are the preferred format for
web fonts.
2:44
These files are compressed
which means they load faster.
2:47
WOFF2 is a newer iteration of WOFF,
2:50
the difference is that
they're more compressed.
2:55
It's well supported across
all the major browsers.
2:57
If you're targeting Internet Explorer or
older browser versions,
3:01
WOFF has the most support.
3:05
SVG fonts are not recommended
3:07
unless you're trying to support
very old versions of Safari.
3:11
Check out the teacher's notes for websites
where you can find fonts to download.
3:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up