1. CSS Tutorial
2. Using CSS in HTML
3. CSS Properties and CSS Rules
4. CSS Selectors
5. CSS Inheritance
6. CSS Precedence
7. CSS Box Model
8. CSS margin
9. CSS padding
10. CSS border
11. CSS Units
12. CSS Colors
13. CSS Text Styling
14. CSS List Styling
15. CSS Table Styling
16. CSS Link Styling
17. CSS Form Styling
18. CSS Image Styling
19. CSS Background Images
20. CSS Gradients
21. CSS Box Shadow
22. CSS display
23. CSS float
24. CSS position
25. CSS Media Queries
26. CSS Column Layout
27. CSS opacity
28. CSS Web Fonts
29. CSS 2D Transformations
30. CSS Transitions

• Finding Web Fonts
• Using Web Fonts
• @font-face Explained
• Using Google Web Fonts

Web fonts are external (extra) fonts that can be used inside your websites and web applications. Web fonts are embedded in their own file, just like an image. Thus, for your HTML page to use a web font you must refer to the web font file. You can refer to a web font file from inside your CSS. This text will explain how to do that - how to use web fonts via your CSS style sheets.

Finding Web Fonts

Web fonts are provided by companies that make fonts. Thus, you can find web fonts from many different places. Two places are good to start though:

Using Web Fonts

To use a web font in your CSS you will have to define the font in your CSS. Here is how you define a web font face in CSS:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), 
       local('Roboto-Regular'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) 
       format('woff');
}

This example defines the web font Roboto from Google. You can now use the font family name when styling text, like this:

p {
    font-family: Roboto;    
}

This example sets the font family to Roboto (the web font defined earlier) for all p elements. The next paragraph is set with this Roboto web font, so you can see what it looks like when rendered:

This text is set with Roboto web font.
This text is set with normal font.

It might be hard to see the difference between the two fonts, so here is a web font where the difference is more visible:

@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: local('Shadows Into Light'), 
       local('ShadowsIntoLight'), 
       url(http://fonts.gstatic.com/s/shadowsintolight/v5/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2) 
       format('woff2'), 
       url(http://fonts.gstatic.com/s/shadowsintolight/v5/clhLqOv7MXn459PTh0gXYHW1xglZCgocDnD_teV2lMU.woff) 
       format('woff');
}

This text is set with Shadows Into Light.

@font-face Explained

The @font-face declaration defines a single web font, in a single font style. In case you need normal, italic and bold font styles you would have to define three different web fonts. One web font for each style. Here is how that would look:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), 
       local('Roboto-Regular'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) 
       format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), 
       local('Roboto-Bold'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) 
       format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), 
       local('Roboto-Italic'), 
       url(http://themes.googleusercontent.com/static/fonts/roboto/v11/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) 
       format('woff');
}

Now you can use these three font styles in your HTML page by setting the font-style and font-weight used in the web font definitions. For instance, to use the italic version of the font you would write this:

p {
    font-family: Roboto;
    font-style : italic;
    font-weight: 400;
}

As you can see, these settings match the settings for font-family, font-style and font-weight declared for the italic version of the font. Here is how text looks when rendered with the italic version of the Roboto web font:

This text is set with Roboto italic version.

The src attribute of the @font-face declaration points to the source of the web font (the web font file). The src attribute contains three different parameters:

• local
• url
• format

The local parameter is the name of the font as it would be called if the web font was already installed locally on the machine. In case the browser finds a local web font with that name, the browser does not need to download the web fonts file. This speeds up page download.

As you can see, each version of a font has its own local name. For instance, "Roboto Regular", "Roboto Bold" and "Roboto Italic". This is because each version of the font is actually explicitly defined as a separate font in its own file. Thus, "Roboto Italic" is only used to render italic text.

As you can also see, each version of the font actually has two local names. The first name is the normal name of the font, and the second name is the PostScript name of the font. Some platforms need the PostScript name to recognize the font. Therefore you can specify both the font's normal name and PostScript name using two local parameters.

The url parameter simply contains the URL to the web font file, just like a URL to an image file.

The format parameter tells which format the web font is encoded in inside the web font file. The provider of the web font file should tell you what format the web font file is encoded with.

Using Google Web Fonts

Since Google's web fonts are free and they have quite many, there is a good chance you might end up using a Google web font some day. When using a Google web font you can choose it from the Google fonts website, and click the "use" button. Then Google will provide you with the CSS to use it.

The code Google gives you usually looks like this:

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>    

You insert this code into the head element of your HTML page. The code points to a CSS file on Google's fonts server which contains the correct @font-face definition for the font you have chosen.

While inserting the link element into your head element might be easy, it results in an extra network request. First the browser needs to download the CSS file with the @font-face definition (the file pointed to the by link element). Then the browser needs to download the web font file itself which is referenced from the @font-face definition.

Instead of including the link element that Google gives you, you can open the CSS file the link element points to in a browser (the URL inside the link element's href attribute). Then you can copy that CSS (the @font-face definition(s) ) into your own CSS file. That way you save a network request to download a very small file. Now the browser only has to download your CSS file and the web font file.