Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Typography

Well done!

You have completed Web Typography!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Self-hosted Webfonts

7:36 with Mattox Shuler

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.

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