Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Web Typography!
You have completed Web Typography!
Preview
Serving up webfonts to a site has become much easier and popular today with webfont hosting services. There are numerous avenues available, so we’ll look at how to use a few of the more popular ones.
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
Now let's look at the second model of web
font distribution,
0:00
which involves hosted services to serve up
web fonts on a site.
0:03
This means the font files are not actually
stored on your site,
0:08
they live elsewhere with a hosted service.
0:11
But your site has permission to serve them
up to users.
0:14
This often operates through a subscription
base model like typekit or
0:17
cloud typography.
0:21
Other places like google fonts allow you
to do this for free.
0:22
Let's take a look.
0:26
Adobe typekit is one of the more popular
today buy.
0:27
Paying a yearly subscription your able to
access thousands of fonts to choose and
0:30
implement on your site.
0:34
Depending on your subscription, you can
have an unlimited or
0:36
limited number of fonts to serve up on a
site.
0:39
Once you sign up, you'll be able to select
the fonts you want and
0:42
then publish the kit on your site.
0:46
This requires some painless copying and
0:48
pasting of JavaScript from Typekit into
your site's HTML.
0:50
You'll then be able to easily call the
font families through CSS on the site.
0:54
What's also nice about this is the
flexibility.
0:58
If you need to switch typefaces, all it
requires is updating your
1:01
kit in CSS instead of having to purchase
another web file licence.
1:04
Typekit has a trial subscription if you
want to test all of
1:09
this out after the video.
1:12
A free version of this hosting service
model is Google Fonts.
1:14
Google Fonts library continues to grow.
1:18
But free fonts can sometimes be limiting
due to issues with versatility,
1:20
number of weights, and accent support.
1:25
With Google Fonts, you simply browse the
site,
1:27
find a type face you'd like to implement,
and add it to your collection.
1:30
You can download your collection and
install the fonts on your computer.
1:34
Which is again nice for mock ups and
design apps.
1:37
Or you can serve up your collection
through Google Fonts API.
1:40
To do this let's add open sans to our
collection and click use.
1:43
Now we're presented with the family in
it's full array of weights and styles.
1:49
Notice here how the numbers refer to each
of the weights.
1:53
These are relevant to our CSS when using
the font weight property,
1:58
as we can enter this number into the
field.
2:02
Currently only normal is selected, so I
wanna at normal italic, bold, and
2:04
bold italic for versatility.
2:09
Over here we see our page load.
2:12
We're still in the green so that's good.
2:14
Next we can add extra characters if more
language support is needed.
2:17
But remember that's going to affect your
page load because the file
2:21
size will be bigger.
2:24
Now Google gives us a code to add to the
head section of our
2:26
site's html which will allow us to call
upon these fonts through our CSS.
2:29
Two alternate options are also provided,
2:34
if you wanna instead import the web font
ccss or through JavaScript.
2:36
To test this out,
2:42
I set up an example workspace with a
similar html setup to our last one.
2:42
Let's use the standard method, and
2:47
I'll add this snakebite of code right
above our main style sheet's link tag.
2:49
Here's our workspace and
2:54
I'll jump into our HTML and add it right
above our style sheet.
2:55
If we head back to Google Fonts we see
that
2:59
Google has provided us with the font
family call in our CSS.
3:02
So I'll highlight that and add it to our
CSS in our body tag.
3:06
I'll click save and hit save in our HTML.
3:13
This HTML is set up in a similar way to
our last work space where the name of
3:16
the fonts should be portraying the style
that they're showing.
3:21
So lets go check that out.
3:24
When I click view we're now able to see
open sands as a web font on our site.
3:27
I'd say that's some fairly painless web
font calling.
3:32
You can check out this work space for a
further look under the hood.
3:34
Also, if we remove the Google font snippet
from our head,
3:38
we could see what it looks like when it's
falling back to our regular sans typeface.
3:42
I'll save that and refresh.
3:47
It's falling back to our browser based
sans typeface, because our CSS specifies
3:50
a sans typeface as a fallback font, if our
open sans typeface doesn't work.
3:54
Like self hosting, pros and cons also come
with hosted services.
4:00
The pros include access to a large number
of web fonts for an inexpensive price.
4:04
Flexibility to change your web fonts on a
whim without buying more
4:09
web font licenses.
4:13
And the ability to easily implement web
fonts on your site.
4:14
The cons deal with reliance on a third
party server which
4:18
could potentially go down and affect your
typography.
4:21
And although the selection is vast a
service might not
4:24
have the exact type face you need.
4:27
Because both self hosted web fonts and
4:30
web font hosting services have distinct
pros and cons there's no one answer.
4:32
It really depends on the budget and
project at hand as to what will work best.
4:37
Lastly I want to cover what a backup plan
can look like if a hosted service is
4:42
down and doesn't display your web fonts.
4:46
Under the 5 family property in CSS, you
can set up a string of
4:49
similar type faces that start with your
first web font choice.
4:53
And then provide the next best system
alternatives.
4:56
So currently we only have open sans, and
sans serf.
4:59
If we were to stack multiple type faces
here for
5:02
fall backs, this technique is called font
stacking.
5:05
If one doesn't display, then it looks down
the road for
5:08
the next one, and the next one down, and
so forth.
5:10
For fall back fonts in your stack, you'll
want to consider typefaces that
5:13
are native to operating systems like Mac
OS and
5:16
Windows, and have a similar look and
metrics to your first typeface choice.
5:19
Use your knowledge from the videos on how
to choose a typeface to
5:24
select a good alternative.
5:26
You can also check out cssfontstack.com.
5:28
Which provide some helpful pre-made font
stacks.
5:31
Let's head over there.
5:34
Here, we're presented with different type
faces and if you
5:35
copy to the clipboard you'll get the whole
stack of type faces that are similar.
5:38
So, we'll go down to Helvetica because
Helvetica is pretty similar to Open Sans.
5:42
So i'll go back to our CSS and we can
paste our stack in.
5:47
I don't want to remove open sans.
5:50
So i'm just going to paste it below it
just to see the stack that's going on, and
5:51
I'll copy these type faces on, cut them
from there.
5:55
And then paste them right there and i'll
remove this extra font family call.
6:00
Great so this is a stack where open sans
will display first if
6:04
it's correctly called from google fonts.
6:07
Next will be Helvetica Neue, then
Helvetica, then Arial,
6:10
then the Sans Serif for the browser.
6:14
At the end of this stack, you can see that
we're calling a generic type family called
6:16
Sans Serif, based on the genre.
6:20
The terms you can use here are Serif,
Sans, Cursive, Fantasy, or Monospace.
6:22
Although I really feel like you're taking
a gamble with Fantasy,
6:28
because the generic font families are all
browser-dependent.
6:31
From there your font stack should be good
to go.
6:34
Just make sure to give it some good
testing.
6:37
A properly built stack can help your
typography weather the storm amidst a web
6:39
font outage.
6:44
That's it for current models of web font
distribution and this stage.
6:45
In the next stage, we'll look at the
basics of web typography.
6:49
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