Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
When working with system fonts, the browser handles the process of dealing with weights, styles, and any variants that you might need. Web fonts give us the ability to use a range of styles from the same family if they're available to us and this means when we are working with web fonts, you are responsible for serving the proper version of the font. Instead of letting the browser bold calluna for example, we might want to use calluna semi-bold. By controlling how our faults are delivered, we can do just that. So we are going to go back to Alice in Web Fonts page in just a moment and we are going to make sure that all of our fonts are using the proper family style when applicable.
And doing this, we are going to examine the methods required to request a proper font style anyway, based on how the fonts are being served and then add a little stylistic variety to our text as well. Okay so you'll notice I am at Typekit and what I want to do is go to my Alice in Web Fonts kit and launch the kit editor. And there is just something I want to show you here about the way to request different weights from Typekit. That's a little different than self hosting and Google fonts. The Google fonts, you just say hey I want to use the bold, I want to use italic and then you just reference bold and italic in your styles. Easy enough.
TypeKit, on the other hand, you will notice that we have already families of calluna, light all the way to black and we have all of then bud black in our site actually. Well, I'll notice that right down here in the lower right hand corner of the Weights & Styles pod. If I click Advanced, it gives me a listing of the value that I need to use request that particular flavor of the font. So if I want semi-bold, I have to use 600. If I want bold, I have to use 700. So bold normal. That's not going to get it done. I need to request 300 through 900 to get the Light, Regular, Semi Bold, Bold and Black.
Now italic, I just say normal or italic and it will serve that properly but in order to pick the way that I want, I have to use those numeric values. So those are the things that you want to sort of right down or be sure of before you go back in your CSS. Now I should also point out to you that in these larger families where you have multiple weights and varieties, Internet Explorer is only going to allow you to use four of them. And it's a limitation. It's actually in the specification that describes how Internet Explore will only accept four family names. So that's something that you also need to be aware of if you are using one of these larger fonts.
I am going to go close out of that and close out of that and go back into our file. So here I am. I have the main.css from the 04_05_CSS directory opened in our Exercise Files. I have changed the Dreamweaver layout a little bit and it is not because I want to use any Dreamweaver tools here. It is going to make a lot easier for me to show you what I'm targeting on the page. So I'm going to turn on Live View so that its renders may be a little bit better. It will still show us our accurate fonts or accurate rendering, but we will have a good idea of at least what we are targeting here.
All right, so what I want to do is I am going to start at the very top and this is Alice in Web Fonts. They are couple of things I want to change here. First of the word N, I don't want that to be bold and the word Web Fonts, I really want that to be all caps. So I am going to go ahead and change that. So I am going to scroll down through my file here and I am going to find my headline styles and I can find those at about line 112, right around in there. In addition to the main one, I actually have these individual ones: the AliceHead, which is the word Alice, the inHead, which is the word in, and then webHead, which is the web fonts.
And the first thing I am going to do is go to the inHead and I am going to change that to font-weight:normal. Since it's in a heading 1 tag, it is going to bold it automatically and then I need font-style to be italic. Normalizing it and italicizing it on the same beat and if I look over here now, I can see it's no longer bold, it's italic. So that's looking much nicer. Now if I go down to the h1 span#webHead, I can see that this is league-gothic. So what I want to do here is I want to go down to the next line.
I am just going to use the text transform property here, so a text-transform and I want those to be all uppercase. So again, I will save that and now Web Fonts is going to be all uppercase. And that's obviously not the font that we are using but you at least give the idea. Now I am going to move down a little bit further into our chapter headings. And here we have Chapter One Down the Rabbit Hole. That's an h1 tag and then we have "In which Alice falls a very curious-looking rabbit down his hole in an odd hallway." This is all one line actually and that is a heading too. So we are going to target that h1 and that h2.
Now the h1 is using junction. Junction, remember, we're self hosting and there's only one flavor of junction. There is no junction bolder, there is no junction italic. Now because of the fact that it's a heading one, the browser is going to attempt to bold and I really don't want that to happen because the font is the way I wanted to look. So I am going to scroll down through my styles and I'm going to find this section chapterOne header h1 on line around 174 or so. And I'm going to set that font weight. So font-weight to normal.
Save that and you can see the difference. You can see it's a lot lighter over here now. This chapter name "Down the Rabbit Hole" is actually in its own selector as well right below that. And I want to italicize that so I am going to do font-style and I am going to do italic. There we go, save that and I can see that it's italicizing it. Now there is a very important distinction here. Junction does not have an italic version of its fonts, so what's going to happen is the browser is going to oblique those characters for you. Now if we had a junction italic, because we are self hosting it, we would have to do another @font-face declaration using the junction font family name and then pass the font-style italic into that declaration and then it would use the proper one.
Now if you are interested in seeing how to do that in a little bit more detail, check out the earlier movie on @font face and you will get a more detailed description of how to do that. Now I am going to go down to the next selector, which is the chapterOne header h2, and this is using calluna. So here when I choose a font-weight, instead of saying normal because I don't want that to be bold, I am going to pass a value 400. Remember 400 is the regular version of this font. So if I save that over here, I notice that I am not getting the bold version of that. I am getting only normal version of it.
Now each of these lines, top, middle and bottom, have their own selectors as well. So here's my top line, here is my middle, and here is my bottom. I am going to use a little bit of variation in here as well. So for the middle line, I am going to ask for a font-weight here of 600. That's semi-bold. And for the bottom line, I am going to ask for a font-weight of 300. That would be the light version. So I am using regular, semi-bold and light on the same one. And I am going to do another text-transform here and I am going to do uppercase on the bottom line as well.
So if I save that and test it, I can see very dramatic change in these headings. Now if you want, you can upload your main.css and preview in the browser. I am going to do that at the very end. Okay, the next thing I want to style are my sub headings right here, this "Alice continues her fall." If I scroll down a little bit, I can find on line 222 section#chapterOne section.subSection h1. That's the heading one right here. And again just using Junction. I know it's in heading so it's going to false bold it so I am going to prevent that from happening. So I am going to do font- weight and I am going to do normal.
Save that and I can see my change. Cool! Now one last thing I want to do here, guys, if scroll up, the very top of this is the beginning of the body copy for this chapter. Every single chapter that begins with the body copy, I would like to create a drop cap. So I want to do that by using CSS and it's actually relatively simple to do. So I am going to go back over to my styles and scroll down and I am going to find this selector right here, section.subSection p.first:first-letter. So this is targeting any paragraph with the class of first and it is targeting the first letter in that. So this paragraph does have a class applied to it and it has the class first.
So on the link line inside that, the first thing I am going to do is float this letter to the left. It's going to cause all the other texture wrap around it. I am going to give it a font size of 380%. Really crank it up of good bit larger so it's going to take multiple lines. For color, I am going to choose rgb(118,81,106). That's a plum color that we're using in our site and if you're interested in finding these colors the very top of the styles, there is a little color table.
You can copy and paste from it if you would like. I am also going to padding to the right so I am going to do some right padding of 0.1em. So that's just going to hold the text off of the letter just a little bit on the right-hand side. I am going to give it a font-weight of 600. Remember this is calluna so 600 is semi-bold. So this'll be a little bit bolder than the characters around it. For a line-height, I am going to do 0.8em. Now that may seem look kind of odd and really this is targeting Webkit browsers. The gecko-based browsers are going to basically treat any coded inline character like this is has a line height of 1 but Webkit browsers on the other hand recalculate line height.
So by saying 0.8em, I am basically shrinking that down a little bit for Webkit browsers, where it's knowing that Firefox is going to ignore this. So it's just one of this little workarounds we have to every now and then. And margin-top of 1 pixel just to push it down a little bit. Now I do want to say that things like line height, sizing, padding, it's going to be different for every single font you do, so don't take these settings as gospel, like "oh here is how I make a drop cap," but you are going to use types of properties to sort of experiment a little bit. Okay, so I am going to save that and I can sort of see my drop cap. So I want to see what that looks like live online.
So I am going to save the file, upload it, and preview this in the browser. And I can see web fonts there is now all uppercase. I am getting italicized, non- bold text there for the word in. Junction is appearing not false bold but like I wanted to. I have got three different weights here of my subheadings and there is my drop cape. And my subheadings aren't being falsely bolded either, so that's perfect. You know getting the proper variation of your font family is really good. It can depend a lot of times on whether that style of weight exists as part of the larger font family.
Now unfortunately in many instances, browsers are still going to resort to the false bolding and skewing the text when obliqueing it, scaling a character proportionally, if you are doing it like the small cap. And since the quality of this can vary widely, a best practice that I would recommend is to always serve the browser the proper weight and style for the font, if you have it, and then test that font in the browser to make sure it's rendering the way that you expect.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.