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.
In this movie we are going to take a closer look at the @font-face syntax as it exists within the specification, and then discuss how the syntax should be modified for real-world implementations. As found in the CSS Fonts Level 3 module, the syntax for @font-face is pretty easy to learn. @font-face declarations are made at the top of style sheets and give the user agent the information needed to access and reference the font. Let's examine this simple rule. @font-face is used for the rule and individual declarations are contained inside the rules brackets.
The first descriptor is the font-family declaration and it allows the author to give the font a name that can be then referenced throughout the style sheet. From this point on, font stacks within the style sheet could reference the "My Font" font. This is followed by the source declaration, which specifies the resources containing the font data. Now this is usually a path to a font resource, although with certain font services this can contain specialized code or link to an encoded resource. This can also be a comma- separated list of multiple declarations.
You could use that, for example, to provide alternate file types for multiple devices. As with any new feature there will be some support issues for @font-face across multiple browsers. In the case of that @font-face, this will cause us to treat syntax that's a bit more complex than what you see here. Now, before we look at modifier syntax to enable cross browser support, let's take a look at why this is currently necessary. So in terms of support, Safari has supported @font-face since version 3.1, Opera versions 10 and above, Internet Explorer since version 4-- No seriously, since version 4, can you believe that? Firefox since version 3.5 and Chrome since version 4 as well. So far so good.
However, although they all support @font-face, the different browsers support different font formats and that can make serving up fonts really tricky. Okay, so here is what supported. Safari supports TrueType and OpenType fonts, although the iPhone and the iPads, worth noting, only supports SVG fonts. Internet Explorer only supports the Embedded OpenType font, Firefox and Chrome support TrueType, OpenType, and Opera supports TrueType, OpenType, and SVG.
Now the Web Open Font Format or WOFF is relative newcomer to web font types and it's currently only supported by Firefox. However, it is the font format contained within the standard and it is rapidly being supported by other browsers, so expect to see that format gain a lot of attraction here in the near future. Well, that certainly muddles things up a bit. The good news is that you can modify your syntax to pass more than one font type, and here is how we do that. So wait. What is going on here and what is up with that smiling face? Well, here, I am going to turn to Paul Irish to explain this.
Now Paul isn't going to show up himself. It's just that he has an excellent blog post about cross-browser font syntax. I encourage you to go check this out, because he explains a lot better than I can. So essentially what we do is we declare the font-family as you would normally, and then modify the syntax to ensure cross-browser support. So here we see font-family MidoMedium. Right now the syntax order has almost everything to do with Internet Explorer, which only supports EOT files or Embedded OpenType fonts. But it would try to download everything else as well. By offering the EOT file first, we keep Internet Explorer from choking on the other file formats and I'll talk about how we do that in just a moment.
All right, so that leads us to this smiley face. What the heck is that thing? Well, the local property that you're seeing here tells your computer what the font is named locally, so the dive if it is already installed in their computer, it will just use that one instead. But the problem here is that the chance that you'll actually match the font name with exactly the same font on somebody else's computer is pretty low. So to make sure that the font you want is used, the web font is downloaded, Paul has advised using a value that is not possibly going to be confused with the local font, like a smiley face. That's nice.
Now the really odd syntax after this is again to prevent IE from downloading all the other fonts. Internet Explorer doesn't recognize the URL syntax when it is worded like this. So it basically just stops processing the rule at this point and it isn't going to try to download all those other fonts. The other browsers are simply going to keep going until they find the font format that they like and or support and then they will serve that up. Now, if all the syntax seems really confusing and hard to remember, don't worry. There are several online resources that will assist you in writing the syntax.
In our next movie we are going to explore one of the services, Font Squirrel, as we download a font for use in our next exercise.
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.