Web Fonts with @font-face

In a previous lesson, 0:00 we learned that users viewing our site need to have the fonts we choose 0:01 installed on their computers, otherwise the browser will not display them. 0:05 So, besides the limited number of website fonts installed on a user's computer, 0:10 we're also able to provide our own fonts by importing web fonts. 0:15 Web fonts are special types of fonts that are optimized for 0:19 screen display, and they're linked to our web pages from an external source, 0:22 then activated when needed. 0:27 So web fonts eliminate that need to depend on the limited number of 0:29 fonts installed on a user's computer. 0:33 And there are different ways we can import a web font with CSS. 0:35 So the method we're gonna cover here is with an @font-face rule. 0:39 So first, I'm gonna go back to our style sheet and I'm going to create a new 0:44 comment at the top by simply copying this first comment and pasting it right above. 0:48 Then let's change the comment to say web fonts. 0:53 So over in our workspace project files, we should see a folder named Fonts. 1:00 And in the Fonts folder, we'll see three different font formats for 1:05 the Abolition Regular web font. 1:10 Now this is one of the fonts from the Abolition typeface, 1:13 designed by Mattox Shuler, who actually taught a course for us on web typography. 1:16 So the reason we need to have different file formats is because of 1:21 browser support. 1:24 Certain browsers only support certain font formats, and 1:26 we'll get to that in just a bit. 1:29 So @font-face is what allows us to link to each of these font formats in one rule. 1:30 Then they're activated when needed by a specific browser or platform. 1:37 So, let's go back to our style sheet, and we're going to link to our font by typing 1:41 @font-face, followed by a set of curly braces. 1:47 So, the first thing we need to do is name our font with a font family property. 1:53 So, inside the font face rule, we're going to add a font-family property. 1:58 And we can write the font family name however we want, because it's for 2:04 internal use in this style sheet only. 2:07 So let's define our font-face inside a set of quotes, and 2:10 let's call it Abolition Regular. 2:15 So next we'll need to specify and link to the locations of the font files. 2:21 So back in the Font folder of our project files, 2:26 we should see another file named webfont-snippet.css. 2:29 And when we open up that file, we'll see that it 2:34 contains a code snippet that links to all the font formats in our fonts directory. 2:37 So I'm gonna go ahead and copy this snippet. 2:42 Then go back to our style.css file and paste it in our @font-face rule, 2:47 right beneath the font family property. 2:53 So here we're specifying alternate font-file formats for 2:56 broader browser support by using the source property and 3:00 a URL value that links to the font file location. 3:04 So let's go over the common font formats we're using here. 3:08 So first is the EOT, or Embedded OpenType format. 3:11 This is a proprietary format for Internet Explorer, and 3:16 this particular declaration is for IE 9's compatibility mode. 3:20 And the URL below is a bit of a trick that makes 3:25 the eot font format display in older versions of IE. 3:29 So below that, we have the WOFF, or Web Open Font Format, and this is 3:32 a newer font format developed by Mozilla and it's supported by all modern browsers. 3:38 Now, an advantage of using the woff format, 3:44 besides having the strongest browser support, 3:47 is that it loads super fast because the data in the font is compressed. 3:49 So, sites using this woff format will actually use less bandwidth. 3:54 And finally, the TTF or TrueType Format, is being used here for 3:58 Safari, Android and iOS display. 4:03 So even though the browser will only load and 4:07 use the font format it supports, we still need to consider performance, because 4:10 embedding too many fonts with @font-face rules can effect our page's load time. 4:14 So we need to keep these to a minimum and only embed the fonts we need. 4:20 So next, to use the font, we'll need to call the font-family in a CSS rule, 4:25 just like we would with any web safe font family. 4:29 So we're gonna use this web font in our h1 and h2 headings. 4:33 I'm pretty sure you're tired of looking at this huge Helvetica heading, right? 4:38 So let's create a new rule in our 4:42 style sheet that targets both the h1 and h2 elements. 4:45 [BLANK_AUDIO] 4:50 And inside the rule, let's declare a font-family property. 4:55 And at now we'll create a font stack by listing 5:01 the desired abolition regular web font. 5:04 First, so inside a set of quotes, I'm gonna type Abolition Regular 5:07 followed by a comma, then I'll simply copy the Helvetica font stack in our body rule 5:15 and paste it in our heading font stack, right after Abolition Regular. 5:22 All right, so let's save our style sheet and let's go back to the browser. 5:28 And when we refresh the page, we're able to see that really nice 5:32 Abolition Regular web font in our main heading and right below in our h2. 5:36 So I think this looks much better than what we had before. 5:42 So now that we have our main heading in place, 5:45 let's suggest the title, right above the main heading. 5:48 I think the letter spacing seems a little too tight. 5:51 So we can increase the space between letters with the letter spacing property. 5:55 So, back in our style sheet, right under the main style section, 6:00 let's scroll down to the title rule. 6:04 And beneath the font size declaration, 6:08 we're going to add the letter spacing property by typing letter-spacing. 6:10 And let's set the letter spacing value to .065M. 6:17 And let's also lighten the font weight by setting a font weight property and 6:25 a value of 200. 6:30 So when we save our style sheet, and refresh the browser, as we can see, 6:32 this increased the letter spacing or tracking in our title. 6:37 Now it's a little lighter and more spaced out. 6:41 So let's do one more thing. 6:44 Let's go back and 6:45 give our title a bottom border that sort of separates it from the main heading. 6:46 So, back in our title rule, let's add a border bottom property. 6:51 And let's set the border width to two pixels, and the border style to solid. 6:58 And let's also add some bottom padding. 7:04 So we'll add a padding-bottom property, and let's set the value to 10 pixels. 7:07 Then let's scroll up to our h1 rule. 7:15 And what we're gonna do is apply a top margin, so 7:19 let's add a margin value and set the first 7:23 value to 12 pixels, and we'll also wanna remove the bottom margin of our headings. 7:29 So let's set the next two values to 0. 7:33 All right? 7:36 So, let's save our style sheet and refresh our browser. 7:38 And I think that's looking pretty good. 7:42 Finally, let's give the arrow image a top margin that gives it plenty of 7:46 separation from the main heading. 7:50 So, back in our style sheet, right under the Layouts Styles, 7:52 let's scroll down to the arrow rule, and 7:55 right beneath the width property, let's add a margin top property. 7:59 And let's set the value to 150 pixels. 8:03 [SOUND] All right. 8:07 So now the arrow graphic sits a little lower in the main header. 8:09 I'm liking that. 8:14 So, again, when you're done with this course, 8:16 be sure to watch our web typography course to learn more about choosing and 8:18 using different types of web fonts and creating typographic layouts. 8:22 And, check out the teacher's notes to this video for 8:26 resources on where to find good web fonts. 8:29