Subtitles of the Movie

In this movie we conclude our look at CSS3 with an examination of Web Fonts. As you may recall, when we were setting up fonts to be used in our project site we ran into a problem that pretty much limited what fonts we could end up selecting because we were limited to what our end user had installed on their computer. CSS3 has a way that we will be able to use the Font files that we really want to use to capture the look and feel for our web site by specifying our font files as if they were just resources that we could pull in and use for our web site. Now, this is going to make our fonts somewhat similar to our images in that they're just resources that we point to and associate with. Now it is important to keep in mind that whenever you do this you need to make sure that you have the appropriate permissions, copyright, or license, for the fonts you're going to be using, just like you have to make sure that you have that with the images you use. Now this idea of a Web Font is not new to CSS3 as CSS2 actually had something that would allow us to do this. Now of course, the actual implementation didn't really pan out, but in theory it was possible. Now this new method that we are going to be using is going to save us a lot of time. It's going to save us a lot of time because we are no longer going to have to do all the tricks that we have to use when we want to use a specific font inside of our designs. So we're not going to have to do the text replacement with graphics anymore, nor are we going to have to create those graphics in the first place. So if we factor those things out we just saved ourselves a lot of time, and that's exactly what our Web Fonts will allow us to do. Now in order to do this we are going to have to set up two distinct things. Now the first step is actually just letting the browser know that a font exists and how we intend to use it, so we declare to the browser with the at face command what the font location is and what the font family name is of that font. Once we have that set up we can actually use the font family that we've specified in that at face command in other styles for stylizing our content. So, let's go ahead and let's jump over to our sandBox and set that up. So, we've got our sandBox, and I'm going to target the H1 and the H1 is going to end up using the font that we're going to set up, but first I do have to do my at face command. I'm going to jump up here to the top of the styles and I'm going to add in the at font-face command, and declare what fonts I'm using. So first of all I declare my font-family and this is going to be EvilGenius BB, and Evil Genius BB is a font that came from Blambot.com. They do offer free as well as for-purchase fonts. If you are interested in the font you see here go check out that web site and support them. They do create some excellent fonts for various purposes. Now, for our example I'm just using this, and of course, I wouldn't be distributing this font unless I had some permissions or the appropriate license, because I'm not going to be distributing this it's OK to kind of use this. So after I've set up what the font-family is going to be I need to set up what the source is, so I use the src and then the specific URL to the actual font file, so I have a fonts folder set up in the sandBox and inside of that I've got the EvilGenius BB underscore reg, for regular,. ttf. Now according to specification you can use either your True Type fonts, the ttfs, or your open type fonts. Now, let's go ahead here and jump on down to the H1 here and this is where I specify the font-family that I want, and I just use the font-family that I declared up above, so I do EvilGenius BB. And I save that and jump back over into my browser and Refresh, and there we go. I'm now able to utilize whatever font that I want to use inside of my web designs. And of course there are going to be some changes to this as well as all of our other CSS properties as the technology becomes more refined, so expect some of this to be changing. Now, that actually concludes our look at Web Fonts as well as our look at CSS3. As I mentioned earlier, this Section was designed to merely give you a flavor for CSS3 and point you in the direction of some more appropriate resources as well as places to look to see what's actually going on directly from the source of the World Wide Web consortium. Now it is indeed worth bearing in mind that CSS3 is still being mapped out, and since that is the case, you should probably proceed knowing that everything I've talked about in this Section is indeed subject to change, depending on how those things proceed and develop. So, just because I've shown you something here that worked doesn't mean that it's going to work in the future. CSS3 is still in a very early stage of development, however, because we have those modules set up we can utilize certain elements before others. So, keep all of that in mind whenever you're working with CSS3 and just know that a lot of power is to come, it just might take a while.