Preview
Video Player
00:00
00:00
Self-hosted Webfonts
7:36One 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.
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