Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Before we use @font-face in our exercise files, I would like to take a moment to show you how you can go out and grab a few fonts of your own. Now although we have included some of the fonts that we will be using in our exercises, you can go ahead and grab another font. Maybe you don't particular like the one that I'm going to be using, so you could feel free to go out and grab another one. Now, I know I have said this before, but I cannot stress enough how careful you should be by double checking your font licenses to make sure you can use them on your sites with @font-face.
And if you're not sure, contact the foundry or whoever you bought the font from for clarifications. Now, one of the fantastic things about the rise of @font-face adoption is the explosion of web licensed and open-source royalty free online font. This is one of my favorite online resources right here for free and licensed fonts. This is Font Squirrel. It's a fantastic site that has a huge collection of free fonts that you can use in your projects. Now the first thing I want to show you is the @font-face kits. So I am going to go here and essentially this is an entire library of fonts that you can download and use in your projects.
@font-face is merely an aggregator for these fonts. You will notice here it says "Font Squirrel makes no guarantee that our interpretation of each license is correct in allowing the @font-face usage." And they also say, "Please tell us if we are stepping on your toes." So hopefully the foundries will contact them if they are may be a little bit out of line, but you can usually find some amazing fonts here for use in your files. We are going to come back to the font that we are going to use in just a moment, but I want to show you another cool little tool of Font Squirrel, the @font-face generator. So let's say you have a font and you know you can use it online, but you don't have all the fallback choices.
You don't have the EOT for example, or you don't have the WOFF version of it. You just have the OpenType of TrueType. What you can do is, you can use the @font-face generator. You simply Add Fonts, tell it that you wanted it to do all work for you or do an Expert where you are taking control of exactly which fonts are created and how the syntax is written, and then you upload it, and Font Squirrel goes and does the rest for you and it generates an @font-face Kit. Now we'll take a closer look at what this kit is in just a moment, but it essentially gives you everything you need. All the fonts that you need, including the syntax to use it on your sites.
It's really, really, really cool. Now notice this checkmark that you have to do. Yes, the fonts I am uploading are legally eligible for web embedding. Just because you have it on your hard drive, it doesn't mean you can upload it and make an @font-face kit out of it. You need to make sure that your license explicitly allows you to use the font online in this manner. So this is an awesome tool, but you want to make sure that you're in compliance with your licenses. So I am going to go back to the @font- face kits and fell free to take some time and sort of peruse these and browse them. They're really cool.
I am going to scroll all the way down, because I know exactly the font that I am looking for. It's the one that we are going to be looking in our site, and it is this font right here, ChunkFive. So when you see a file that you like, you can click to see, to view the font itself. Here is the font. You can even take it for a test drive. You can see its character map. I like the test drive section, because you can say okay what does this look like and you can see the font in action in terms of how it's going to look on your page. So this is a really nice sort of slab sarif, sort of fun, headline font.
We are going to be using it for some of the headlines in our site. So I really want the @font-face kit, so what I am going to do is go right there to @font-face and notice that I can choose what font formats I want. TrueType, EOT, WOFF, and SVG. I really want all of these to be honest with you. So what I am going to do is I am going to go ahead and say okay, I want to download the kit. So when I want to click that, it's going to go ahead and download a zip file to your hard drive. Now I want to take a closer look at zip files, so before we do that, I want to talk to you a little bit more about ChunkFive.
ChunkFive was created by the fine folks of The League of Movable Type. You can go to this website at www.theleagueofmoveabletype.com. These folks are dedicated to providing quality, royalty-free open source @font-face ready fonts, and you can also download fonts here as well. The difference between downloading fonts here and downloading them at Font Squirrel is that Font Squirrel gives you that really cool @font-face kit, and you can see there's Chunk. So they have got some really cool fonts. So League of Moveable Type, definitely worth checking out. So what is a font face kit? Let's take a closer look at it.
I am just going to drag this to the Desktop so that I can see it and then minimize everything. So here is my zip file, and if I go ahead and extract this, I can see that I have a folder with the EOT file, SVG, TrueType and WOFF. I also have a demo file and a style sheet. So the demo files and HTML files are using it, but the style sheets are the really cool part. There is also an open font license that you should read that's going to give you a little bit of information of exactly how you can use this font.
Right, so I am going to go ahead and open this up, the stylesheet.css that comes with every single font kit that you download, and right there is always syntax I need to use this particular font. You will notice it even has Paul Irish's smiley face. How cool is that? So you can literally just copy and paste this rather than having to generate the syntax yourself. Now, well, without typing that yourself, you might not learn quite as much, so we are going to do that ourselves in our next exercise. So in our next movie, we are going to use thee fonts to spice up the Export California site. Now, although you do have these fonts included in your exercise files, feel free to use the ones that you just downloaded or feel free to go out and find another font that you like and want to use.
That will be fine too. So again, I recommend checking out Font Squirrel, League of Moveable Type. If you do a quick search you will find a bunch of other sites out there dedicated to providing free open-source fonts. So there really is a wide selection out there without having to go out and pay a lot of money for fonts. However, I do want to stress that most font foundries and font companies are really making an effort to provide web fonts. So if you see a font that you really want and need, I encourage you to purchase that for online usage to prove that the market is really strong for this type of product.
Find answers to the most frequently asked questions about CSS3 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.