Self-hosted Webfonts

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