Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Once you understand the syntax of @font-face, it's pretty easy to begin using it throughout your site. In this movie, we're going to use the Chunkfive font downloaded in the last movie to modify our site headings. Although, we have included the Chunkfive font in the Exercise Files, please feel free to use the fonts you've downloaded, especially if they're different from the Chunkfive font. So before we get started with this, I want to show you where I've placed these fonts. We're in the Chapter_04, 04 folder, and in the 04_04 folder there is an _fonts directory, and that's where all of these fonts are located.
So, it has the EOT, the SVG, the TrueType, and the Web OpenType Font Format form, they are all sitting inside there. Anytime we reference them, when we reference them in our @font-face declaration, we are going to need to point from the CSS file to the fonts in that folder. Now, the reason I bring this up is because it's really super easy to just download a font kit and copy and paste the @font-face declaration. That's really easy. But you have to remember that wherever you place your fonts within your website, if you are going to be hosting them, it needs to point to that exact spot.
So copying and pasting that and just going with it from there probably won't work. You will need to at least modify the path to them. Okay, with that in mind, I have also opened up the main.css from the _css folder. I am going to go down where I placed some space for the @font-face declaration and that's on about line 42. So here I am just going to do an @font-face declaration, @font-face, open up a curly brace, hit Enter twice, and close it, and that's just going to give me sort of that open and closed curly braces so I can go ahead and add my syntax inside that. Now, the first thing I need to do is a font family declaration.
So font-family and then a colon, and I can go ahead and call this really anything I want to call it. It's totally up to me. Now this is the Chunkfive font that I am going to be using. Obviously, if you are using a different font, you will use a different name, but I am just going to pass in quotation marks, single or double, ChunkFiveRegular. If that was too much for me to type a little bit later on I could just call it Chunk. That would be fine. It will work. It just needs to be encased inside those quotation marks. Now, after that, I am going to tell our browsers where they can find this font and the first one that I am going to do, source here, and the URL is going to be the EOT file.
Remember we are doing that first because Internet Explorer really, really, really wants this font and it wants it now. So I am going to do ../_fonts. Now, why am I doing that? Remember, it's going to go out of the CSS directory into the fonts directory and it's going to find these fonts. So that path has to be right, and inside that I am going to link to the Chunkfive-webfont.eot, and then close my quotation marks, close the parentheses and type in a semicolon. So you have to know the name of your font obviously and it is case-sensitive, so you want to type it in exactly the way that you see the font.
Going down on the next line, we're going to take care of our local issue. So source, local, and I am going to open and close the parentheses there. Now, remember local is basically going to look on your user's hard-drive and say do you have this font? Can I use it? It would prefer to use that local one if it can, if it could. Again, the chances that those two files are going to match up, even name dthe same thing is pretty remote, so I want to basically just turn this option off, and I do that by using the technique that's described in Paul Irish's blog. I put in the smiley face.
Now, how you do that? Well, I am going to go to my Character Map. I am on a PC, so I can use the Character Map to do this but if you're on the Mac, you can go to your Character Viewer and really both of these utilities will help you out. What you're really looking for, more than anything else, the smiley face is nice, but what you're really looking for is a 2 byte Unicode character. Now, why are you looking for that? Because in the OpenType font specification, it states that the Mac does not allow fonts to be named with a 2-byte Unicode character involved in the name, so if you use one of these characters, there is a great chance that no font foundry will ever, ever name their font this.
So I am just going to use the smiley face. Now, on the Mac, they have skull and crossbones that I absolutely love. I typically use that. In fact, I think it's in some of the Exercise Files. But since I am on the PC, I will just go ahead, select that, and actually I only need one of them, and copy it, and then go back into my local declaration and then paste it. Don't forget to enclose it and some quotations. Now, after that, all I need to do now is just go ahead and list the rest of my fonts. So url('../. Remember these are always literal strings, so keep them in single or double quotations, _fonts and then this one is going to be the Chunkfive-webfont.woff.
Remember to close your quotation marks, close the parentheses, and then we're going to pass the format. So format of this will be WOFF. Now again, Internet Explorer doesn't recognize the syntax, so it just kind of stops. All the other browsers will keep going because it recognizes it. After that we'll do url('../_fonts/ Chunkfive-webfont.woff.ttf), close that, and then we will pass the format for that. That would be truetype.
So the difference in syntax here is designed really just to fool Internet Explorer, and then finally we're going to do our SVG. So URL, and this is is where it gets really fun, ../_fonts/Chunkfive-webfont.svg. Now, that should be enough but we're going to follow that by hash symbols, no space, just the hash, pound or octothorpe, whatever you like to call it. Then type in webfont4CzPTNtF. What is all of that?! So after the SVG font, basically you can pass the name of the font, whether it's Italic or Bold/Italic or Heavyweight, whatever basically that's what that's for.
When you download a font kit from Font Squirrel, it generates the SVG font and then appends that on the end of it. So it sort of becomes that particular SVG font's name. The only reason I had to do that is because I'm using the font that I downloaded from Font Squirrel. So obviously, if you get SVG fonts from other places, make sure you look at the name very carefully and understand what you need to use there. And then finally, we're going to do format('svg'). Now, as you can see, there are a lot of reasons why you might want to go ahead and use Font Squirrel.
I mean that's much easier. Now, the other thing I am going to do here is I am also going to go ahead and give it a default font weight, and I am going to do normal, and I am going to give it a default font-style as well, and this is optional. You don't have to do this normal. Now, the reason that I'm doing it is because this is not an italics font, not italicized, so I don't want it be italicized. And also it's a pretty heavy headline. I do not want this font-weight to be bold if I can help it. So I am going to go ahead and pass the default font-weight of normal, saying that you know unless you are told otherwise, this font should not be bold.
All right, so I am going to go ahead and save that and there is our font-face declaration. Now, writing these things, especially using Paul Irish's bulletproof method that we talked about earlier can be time-consuming. Definitely it's tedious. Unfortunately it's extremely easy to mess it up. If you miss one character, the whole thing doesn't work or at least one font doesn't work. Remember, one bad comma, one bad semicolon could keep that particular font-face from working. So my advice is to use the generated code. If you use a service such as Font Squirrel or some other online font service or type the declaration very carefully and then save it as a snippet and then copy and paste it later on.
Now, remember that if you are using the generated code from some place like Font Squirrel, the path to the font resource needs to match up. So where you keep the font on the website and how you reference that in your CSS file is incredibly important. So you want to make sure that even if you are using the generated code, you still modify that. So now that we have that declaration finished, it's time to use our new font. Yay! It's hard to stays out of the way. So in our next exercise, we're going to go ahead and do just that as we reference our new font name in our font-family declarations.
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.