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
One way you can serve up webfonts to your site is through self-hosting the files. We’ll see what that entails along with the pros and cons.
Droid Serif on Font Squirrel
The Best Way to Serve Fonts to Your Website, Benjie Moss
MyFonts Top Webfonts
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
As we saw earlier,
0:00
the web is continually evolving with new
functionality when it comes to type.
0:01
One of the major game changers is the
ability to display a typeface on your
0:06
site, that someone does no already have
installed on their computer.
0:09
And the next few videos will cover two
mainstream models used to
0:13
serve up web fonts on a site.
0:17
The first model is on self hosted web
fonts, and
0:19
the second is on using other web font
hosted services.
0:22
There are multiple avenues available
today, so
0:25
we'll focus on a few of the more popular
ones in each model.
0:28
Up first, let's talk about self hosted web
fonts.
0:31
This means you have actual web font files
hosted on your own site.
0:34
And are calling them through the app font
face method in your CSS.
0:38
To serve up web fonts like this, you need
to purchase a web font license from
0:42
a foundry or web font distributor, or
you've chosen a typeface with
0:46
a free web font license to host the files
and serve them up on your site.
0:50
Make sure to read what the license covers
for a typeface.
0:55
In most cases, buying a standard desk top
license does not cover web font use, so
0:58
you'll need to buy a web font license.
1:03
Let's head over to myfonts.com to see how.
1:06
First,.
1:08
I'll click on the bestsellers list, and
1:09
we can check out a bunch of different type
faces here.
1:11
But I like Brandon Grotesque, so we'll
click into that,.
1:13
And we're presented with a specimen
images, which showcase the type face and
1:17
its features.
1:20
So designers can get an idea of how it
looks on different settings.
1:21
If we scroll down, we see that there are
multiple licensing options available like
1:25
desktop and web find.
1:29
If you click into those icons,
1:32
you'll get a more detailed statement on
what each license covers.
1:33
As mentioned earlier, if there's not a web
font license available for type face.
1:36
Then contact the foundry or type designer
to see how to proceed.
1:40
It's worth noting here, that you can try
out these web fonts before you buy them.
1:44
If you want to get a good understanding of
if their the right fir for your site.
1:48
So let's say, I'm sold on Brandon
Grotesque, and I want to get it.
1:52
I'll click the Add to Cart, and
1:56
here we're presented with the two
different licensing options.
1:58
We get a discount if we purchase both, but
I only want the Web.
2:01
So I'll add, I'll click that and hit Add
to Cart.
2:04
I'll continue to my cart.
2:08
And on this page, we're presented with our
page views per month.
2:10
You should enter whatever page view your
site is getting per month.
2:14
So let's say we're getting 100,000 page
views.
2:17
We'll see here, that our total actually
increases.
2:20
And this is because more people will be
seeing the font on a site, so
2:24
it requires a higher price for a license.
2:27
If we finish the checkout we'd get
instructions from myfonts on how to
2:31
implement these web fonts for our site.
2:35
The details may be slightly different on
other font distributer sites like
2:37
fontshop, webtype or fonts.com, but the
gist is the same.
2:41
The second scenario we discussed in
regards to self hosting web
2:45
fonts dealt with utilizing a typeface with
a free license for use the web.
2:48
So let's head over to fontsquirrel.com to
check that out.
2:52
Here we could browse different fonts to
see which one's we would like, but
2:56
I've already picked out one called droid
serif so we'll head over to that.
3:00
If we click on that we're again presented
with a bunch of different specimen images
3:05
showcasing the typeface, and if we hit
download ttf then we can download
3:09
the actual desktop license files for our
computer, and install them there which is
3:13
great if you want to use them for mockups
or things like that in design apps.
3:17
But what we want is the webfont kit, so
I'll click that.
3:21
There are different language sets and file
options available to choose from that
3:25
will affect how large our webfont files
are.
3:29
A single webfont may be a small file size,
but
3:32
they can add up pretty fast with multiple
weights, and styles, and language support.
3:35
So be careful with how that effects page
load times.
3:39
And watch out for
3:42
roughen type faces as their file sizes can
get really big, really fast.
3:43
And they're rendering on the web is a
toss-up.
3:47
Once we download the files, we can open up
our folder.
3:50
And jump in to the Joinsera font face kit.
3:54
We're presented with its license, if you
want to read that.
3:57
And how to use web fonts.
3:59
We're gonna be going over that so we don't
need to look at that.
4:01
And we'll jump in to the web fonts folder.
4:03
Here we're presented with four different
styles of the typeface.
4:05
And in each of these folders we have the
different styles of this web font to use
4:09
on our site.
4:13
We don't need these specimen files or
4:14
css files as they're just showing off how
the typeface can look.
4:16
To expedite the process, I've set up an
example workspace on Treehouse that
4:21
you can launch and check out.
4:25
I've already placed all those web font
files in one folder for
4:27
a web fonts folder.
4:30
Now we can call them using the at font
face method in CSS.
4:32
The CSS is based on the example CSS from
the original folder that we
4:35
got from font squirrel.
4:40
So let's look at how it works.
4:41
Here we have the at font face rule that
calls the fonts onto the sites.
4:43
We have our font family, which is simply
named joyed serif.
4:47
And then we have the source URLs for each
format of the web fonts necessary for
4:50
different browsers.
4:55
These are different file versions of the
same style that
4:56
are linked to from the web fonts folder
over here.
4:59
Next, we have the font weight and
5:02
style, and both are normal because this is
our regular style.
5:04
We want to start a new font face rule for
5:07
our next style, which is our regular
italic weight.
5:10
So, these files are linked to our italic
weight style.
5:14
And then we've changed the font style here
to italic, and then we've gone on for
5:18
our bold, and set that up in our bold
italic and set those up.
5:22
Now I've set up the body of our document
to be that type
5:27
face droid serif with serif as a fall back
font.
5:30
I've also created some bold and italic
classes that we can call in our HTML.
5:34
The HTML is quite simple as it just
references each of the type faces that
5:40
we're calling, and uses the styles to
display those type faces.
5:44
Let's go check that out.
5:49
Looks great.
5:51
Even though Droid Serif is not installed
on this computer we can still see it
5:52
displayed on this web page.
5:56
Our web finds have been called, and all
four styles are displaying correctly.
5:58
As a quick reference I'll show you what
would appear if the app font face
6:03
method wasn't set up, and if the files
weren't installed on our computer.
6:06
So I'll go back to our CSS, and remove all
these at font face calls for
6:10
our web fonts.
6:15
And I'll re-save the file, and then
refresh the file over here.
6:17
Our droid serif typeface is gone.
6:21
And replaced with the basic serif rendered
from the browser,
6:23
because we're no longer calling it NRCSS.
6:27
There are both pros and cons to self
hosting web fonts.
6:30
Some pros include owning a [SOUND] web
font license versus subscribing to
6:33
a web font for a limited time.
6:37
[SOUND] The ability to custom sub set
fonts which means
6:39
removing unnecessary characters to
minimize the file size.
6:42
More control over the way fonts are served
up.
6:46
And being able to purchase the exact
typeface we want, instead of
6:49
finding a close match from a subscription
library that might not have the exact one.
6:53
The main con of self-hosting is it can be
more expensive up front
6:58
to purchase a web license rather than
subscribe to a hosted service.
7:02
For instance, the Brandon Grotesque family
we used as
7:06
a reference on MyFonts was starting at
$249 for webfonts.
7:09
That same family is also available on
Adobe Typekit, a subscription-based model,
7:13
starting at $25 per year.
7:18
Now that you know more about self hosting
fonts, you can get
7:19
some practice by downloading some webfont
kits and seeing how to implement them.
7:24
You can also check out the example files
to this project, and the download section.
7:28
Up next, we'll give the web font hosting
services available today
7:32
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