Start learning with our library of video tutorials taught by experts. Get started

CSS3 First Look

Downloading sample fonts


From:

CSS3 First Look

with James Williamson

Video: Downloading sample fonts

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.
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

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.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Downloading sample fonts

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.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS3 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked