facebook google plus twitter
Webucator's Free CSS Tutorial

Lesson: CSS Fonts

Welcome to our free CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will learn how to use CSS to change the font size, to make text bold and italic and even to change the text to use Small Caps.

Lesson Goals

  • Work with the font-family property.
  • Work with the font-size property.
  • Work with the font-style property.
  • Work with the font-variant property.
  • Work with the font-weight property.

Font - the old way

Before looking at how we define font properties with CSS, we'll take a look at how it's done with plain-old HTML. In HTML, we define the font name (i.e., face in HTML, family in CSS) and the font size with the <font> tag, like so:

<font face="list of font names" size="size">

However, the <font> tag has been deprecated, meaning that it is no longer part of the HTML specification, and, although some browsers still support it, we strongly recommend that you never use it. Instead you should use CSS as we'll see in this lesson.

Bold and Italic

In HTML, you can make text bold and italic with the <strong> and <em> tags. Although these tags aren't deprecated, they should be used sparingly. Most often CSS should be used for bolding and italicizing text.

Font-family

The font-family property is used in CSS to specify the font name to apply to an element. You can specify by font name or font category.

Specifying by Font Name

When you specify a font by font name, the browser will look for the named font on the end user's computer. If it finds it, the font will be displayed accordingly. For example, the following rule would make the font of all <p> tags Arial:

p { font-family: Arial; }

If the Arial font were not found on the end user's computer, the browser would display a default font. If you are concerned that the font name you want to use might not be found on a user's computer, you can provide a list of options.

p { font-family: Arial, Helvetica; }

In this case, the browser will first look for Arial. If it doesn't find Arial, it will then look for Helvetica.

Specifying Font by Category

When you specify a font by category, the browser will use the font the user's computer specifies for that category. For example, for monospace, the computer might specify Courier. The font family categories are listed below:

  • cursive
  • fantasy
  • monospace
  • sans-serif
  • serif

To be extra safe, designers often specify a couple specific options followed by a font family category, like so:

p { font-family: Arial, Helvetica, sans-serif; }

This way, if neither Arial nor Helvetica is found, the browser at least knows to use some sans-serif font.

The following code sample illustrates how font-family works:

Code Sample:

Fonts/Demos/FontFamily.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Font Family</title>
<style>
	body {
		font-size: large;
	}
	div {
		margin: 10px;
		padding: 10px;
		border: 1px solid black;
	}
</style>
</head>
<body>
<div style="font-family: Arial, Helvetica, sans-serif;">
	Arial, Helvetica, sans-serif
</div>
<div style="font-family: 'Times New Roman', Times, serif;">
	'Times New Roman', Times, serif
</div>
<div style="font-family: 'Courier New', Courier, monospace;">
	font-family: 'Courier New', Courier, monospace
</div>
<div style="font-family: Verdana;">
	Verdana
</div>
<div style="font-family: Comic Sans MS;">
	Comic Sans MS
</div>
<div style="font-family: Wingdings;">
	Wingdings
</div>
</body>
</html>

The above code will render as follows:Font Family

The web-safe fonts are those fonts that are most commonly installed on computers and are therefore safe to use in your CSS. You can read the full list of safe web fonts on About.com: http://webdesign.about.com/od/fonts/qt/web-safe-fonts.htm.

Font-size

One of the nicest benefits of CSS is the precise control it gives designers over the font size. While HTML limits you to seven different relative font size, CSS gives you the ability to specify exactly how big or small you want text to appear. You literally have infinite control.

Font-size Units

All the units of measurement can be used. The following screenshot illustrates the relative size of different units:Font Size Units

Relative Font-size Terms

In addition, font size can be defined using the following relative terms:

  • xx-large
  • x-large
  • large
  • medium
  • small
  • x-small
  • xx-small
  • smaller
  • larger

The terms xx-small to xx-large work similarly to font sizes 1 through 7 in HTML, though they don't match up exactly. The terms smaller and larger change the font size of an element relative to its parent element's font size. The following code illustrates this:

Code Sample:

Fonts/Demos/FontSize.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Font Sizes</title>
</head>
<body>
<div id="smaller">
	This text is <span style="font-size: smaller;">smaller and
	<span style="font-size: smaller;">even smaller and
	<span style="font-size: smaller;">even smaller</span>
	</span></span>.
</div>

<div id="larger">
	This text is <span style="font-size: larger;">larger and
	<span style="font-size: larger;">even larger and
	<span style="font-size: larger;">even larger</span>
	</span></span>.
</div>
</body>
</html>

The above code will output the following:Font Sizes

Best Practices

Most experts agree that font size should be defined in relative units (e.g., em, rem, or %) or in terms (e.g., large, small, etc.). This is because absolute font sizes can make pages inaccessible to people who have difficulty seeing. In most browsers, a user can change both the "zoom" of the page and, separately, the default font size. While "zooming" will increase the size of all elements (font included) on the page, changing the default browser font size won't have any affect on fonts whose size in CSS is specified using absolute, rather than relative, units.

Unfortunately, there is a downside to using relatively defined font sizes and that is that you have less control over design. This can cause text to wrap when you don't want it to or table cells to expand beyond what you had intended.

Font Family and Font Size

Duration: 15 to 25 minutes.

In this exercise, you will modify an HTML page by applying font sizes to different elements on the page.

  1. Open Fonts/Exercises/Stories.html for editing. The file contains several children's stories.
  2. Modify the font family and size of the different elements on the page. You may do this using inline styles, an embedded style sheet, and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with font family and font size with CSS.
  3. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

Fonts/Solutions/Stories-FontFamilyAndSize.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Stories</title>
<style>
	h1
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
	}
	
	p
	{
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
	}
	
	.topLink
	{
		font-family: "Comic Sans MS";
		font-size: medium;
	}
</style>
</head>
<body>
<h1 id="top">Stories</h1>
<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br>
<a href="#alice" class="topLink">A Mad Tea-Party</a><br>
<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br>

<hr>

<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2>

<p>Pooh always liked a little something 
---- C O D E   O M I T T E D ----
and said to himself 'Silly Old Bear!'</p>
<a href="#top">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>

<p>There was a table set out under a tree 
---- C O D E   O M I T T E D ----
that's the same thing, you know.'</p>
<a href="#top">Back to top</a>

<hr>

<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2>

<p>Along time ago, there lived an old poet,
---- C O D E   O M I T T E D ----
and you know, too, how ill-behaved he is!</p>
<a href="#top">Back to top</a>
</body>
</html>

Font-style

Currently, the only use for font-style is to make text italic. The values are listed below:

  • normal
  • italic
  • oblique

However, italic and oblique are displayed in the same way. Since italic has better support, you should use it.

Font-variant

Currently, the only use for font-variant is to turn lowercase letters into small caps. The values are listed below:

  • normal
  • small-caps

Font-weight

The weight of a font determines how thick (or bold) it is. Possible values are:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • bold
  • bolder
  • lighter
  • normal

The numeric values are used for fonts that can have many different degrees of boldness. Most fonts, however, are either bold or normal (not bold).

Font Style, Font Variant and Font Weight

Duration: 10 to 20 minutes.

In this exercise, you will modify Fonts/Exercises/Stories.html by applying font styles, font variants, and font weights to different elements on the page.

  1. Open Fonts/Exercises/Stories.html for editing.
  2. Modify the font style, variant, and weight of the different elements on the page. You may do this using inline styles, an embedded style sheet, and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with these CSS font properties.
  3. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

Fonts/Solutions/Stories-FontStyleVariantAndWeight.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Stories</title>
<style>
	h1
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-style: italic;
		font-weight: normal;
	}
	
	p
	{
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
	}
	
	a
	{
		font-style: italic;
		font-weight: bold;
	}
	
	.topLink
	{
		font-family: "Comic Sans MS";
		font-size: medium;
		font-variant: small-caps;
		font-style: normal;
		font-weight: normal;
	}
</style>
</head>
<body>
<h1 id="top">Stories</h1>
<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br>
<a href="#alice" class="topLink">A Mad Tea-Party</a><br>
<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br>

<hr>

<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2>

<p>Pooh always liked a little something 
---- C O D E   O M I T T E D ----
and said to himself 'Silly Old Bear!'</p>
<a href="#top">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>

<p>There was a table set out under a tree 
---- C O D E   O M I T T E D ----
that's the same thing, you know.'</p>
<a href="#top">Back to top</a>

<hr>

<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2>

<p>Along time ago, there lived an old poet,
---- C O D E   O M I T T E D ----
and you know, too, how ill-behaved he is!</p>
<a href="#top">Back to top</a>
</body>
</html>

Font-face

The CSS3 @font-face rule enables the loading (for browsers that support it) of a font file, and thus offers us the ability to use any font, not just those our users happen to have loaded on their computer or device. The rule has been supported by Internet Explorer versions for years (though relied on the use of Microsoft's proprietary Embedded Open Type font format); the current @font-face rule is defined in the W3C's CSS Fonts Module Level 3 specification. As the W3C specs state:

The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms. A set of font descriptors define the location of a font resource, either locally or externally, along with the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.

In our CSS, we define our own font-family and associate it with a font file:

@font-face {
		font-family: Gentium;
		src: url('Gentium.ttf');
	}

A subsequent CSS rule might style a given element with our newly defined font-family:

div.newsitem {
		font-family:Gentium;
	}

Browsers that support the @font-family rule will download the specified font file and will use it to render the designated content with it.

Different browsers support different font-file formats; notably, Internet Explorer supports only Embedded OpenType (.eot) files. To address these differences, the specification for the @font-face rule allows for a series of font files, with format hints to aid browsers in selecting the appropriate file for the font:

@font-face {
		font-family: bodytext;
		src: url(ideal-sans-serif.woff) format("woff"),
		url(basic-sans-serif.ttf) format("opentype");
	}

Here's a list of the formats supported by the W3C specification:

@font-face Font Formats
Format String Extensions
WOFF (Web Open Font Format) woff .woff
TrueType truetype .ttf
OpenType opentype .ttf, .otf
Embedded OpenType embedded-opentype .eot
SVG Font svg .svg, .svgz

In addition to specifying the font-family name and one or more font files for our @font-face rule, we can also specify:

  • font-style, with values normal (default), italic, or oblique.
  • font-weight, with values normal (default), bold, 100, 200, 300, 400, 500, 600, 700, 800, or 900.
  • font-stretch, with values normal (default), ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, or ultra-expanded.

Let's look at a typical example. We'll download a font from Font Squirrel, a popular resource for free fonts:

Code Sample:

Fonts/Demos/FontFace.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>@font-face</title>
	<meta name="viewport" content="width=device-width">
	<style>
		@font-face {
			font-family: 'RochesterRegular';
			src: url('Rochester-Regular-webfont.eot');
			src: url('Rochester-Regular-webfont.eot?#iefix') format('embedded-opentype'),
				url('Rochester-Regular-webfont.woff') format('woff'),
				url('Rochester-Regular-webfont.ttf') format('truetype'),
				url('Rochester-Regular-webfont.svg#RochesterRegular') format('svg');
			font-weight: normal;
			font-style: normal;
		}
		
		p {
			font-family: RochesterRegular, Georgia, serif;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<h1><code>@font-face</code></h1>
	<p>When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</p>
</body>

Open ClassFiles/FontsTextEffects/Demos/FontFace.html to view this example.

We use the font "RochesterRegular" from Font Squirrel to style the first paragraph of the U.S. Declaration of Independence:

@font-face demo

We use the @font-face rule to define the name of our font, associate it with multiple font files, and define the font's weight and style.

Font Squirrel is a useful resource for generating @font-face rules: note the ?#iefix appended to the .eot file - this tricks versions of Internet Explorer to get around a known bug for not loading multiple versions of the font file.