Using the font-family Property

Activity

Objective: Practice applying the font-family property values and observe results using web browser tools.

Setup:

Copy all the files from the start-01 folder to practice folder and replace if necessary.

The activity's completed file can be found in the completed folder.

Steps:

Open the font-family.html file in your web browser.
Open the font-family.css file in your code editor. It has the following contents:
```
@charset "UTF-8";

body{

}
h1{

}
h3{

}
```
What fonts were selected for this web page and where can you verify?

The web browsers provided a default serif font name. You may be able to use the web browser tools to see what was selected for the operating system and web browser you are using.

For example the font for the h1 element is shown as Times using the Chrome tools on a Macintosh.

In the font-family.css file insert in the body selector the following …

	font-family:"Gill Sans", Arial, Helvetica, sans-serif;

… resulting in the following …

body{
	font-family:"Gill Sans", Arial, Helvetica, sans-serif;
}

… and save.

Reload the font-family.html file in your web browser.

What font was selected for the h1 element and where can you verify?

All the elements use the sans-serif font name.

For example the font for the h1 element is shown as Gill Sans using the Chrome tools on a Macintosh.
In the font-family.css file insert in the h1 selector the following …
```
	font-family:Verdana, Geneva, sans-serif;
```
… resulting in the following …
```
body{
	font-family:Verdana, Geneva, sans-serif;
}
```
… and save.
Reload the font-family.html file in your web browser.

What font stack stack was selected for the h1 element?

All the elements use the h1 element used the h1.

For example the font for the h1 element is shown as Verdana, Geneva, sans-serif font stack.
DIY: In the font-family.css file use the following font stack for the h3 selector …
```
"Arial Black", "Arial Bold", Gadget, sans-serif;
```
Save your work and verify using the web browser tools the font stack was applied and which font was rendered.

This are the results shown using the Chrome web browser tools on a Macintosh.

DIY: Apply the following font stack …

font-family:"PT Mono", "Courier New", Courier, monospace;

… to all the font names in the font-family.html file.

Font names displayed in sample file.

Try to resist before thinking of a plan of action!

Hint: Create a class selector and use the span element with a class attribute. Another solution is to use the code element and a code CSS selector.

This is how the completed page will appear in the web browser.

Completed practice file.

Example of a CSS class selector to apply the font stack.

.code-snippets{
	font-family:"PT Mono", "Courier New", Courier, monospace;
}

The class attribute used in the HTML.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Using font-family CSS Property | Lon Hosford</title>
	<meta name="description" content="Simple example showing the use of the font-family property.">
	<link rel="stylesheet" type="text/css" href="font-family.css">
</head>
<body>

	<h1>Using the font-family CSS Property</h1>

	<h3>Expressing the values</h3>
	<p>The font-family CSS property value is a single font family name or a prioritized list of font family names and generic family names. Multiple values are separated by a comma. For example <span class="code-snippets">Arial,&nbsp;Helvetica,&nbsp;sans-serif;</span> where sans-serif is the generic for these fonts.</p>

	<p>Font family names having spaces are enclosed in quotation marks for example <span class="code-snippets">"Trebuchet MS"</span> shown in a list <span class="code-snippets">"Trebuchet&nbsp;MS",&nbsp;Helvetica,&nbsp;sans-serif</span>. This is often called a <em>font stack</em>.</p>

	<p>Web browser uses the first font on the list that it finds installed on the computer or if available, downloads from the internet. Any others are ignored.</p>

	<p>Generally at least one font is selected that is commonly installed the Machintosh and Windows operating system. In this  font stack case <span class="code-snippets">Arial,&nbsp;Helvetica,</span> the first is a likely installed Windows font and second is a likely installed Macintosh font.</p>

	<h3>Generic family names</h3>
	<p>It is possible that the web browser may not find a font in the list. As a result specifying a generic font name at the end of the list allows the web browser to use a default font installed in the computer. Generic family names are <span class="code-snippets">serif</span>, <span class="code-snippets">sans-serif</span>, <span class="code-snippets">cursive</span>, <span class="code-snippets">fantasy</span> and <span class="code-snippets">monospace</span>.</p>

</body>
</html>

The changes are shown in bold.

Using the class selector was one potential solution. Another is using the code selector and use the code element.

You can find this solution alternative in the completed folder. See font-family-alt.html and font-family-alt.css.

code{
	font-family:"PT Mono", "Courier New", Courier, monospace;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Using font-family CSS Property | Lon Hosford</title>
	<meta name="description" content="Simple example showing the use of the font-family property.">
	<link rel="stylesheet" type="text/css" href="font-family-alt.css">
</head>
<body>

	<h1>Using the font-family CSS Property</h1>

	<h3>Expressing the values</h3>
	<p>The font-family CSS property value is a single font family name or a prioritized list of font family names and generic family names. Multiple values are separated by a comma. For example <code>Arial,&nbsp;Helvetica,&nbsp;sans-serif;</code> where sans-serif is the generic for these fonts.</p>

	<p>Font family names having spaces are enclosed in quotation marks for example <code>"Trebuchet MS"</code> shown in a list <code>"Trebuchet&nbsp;MS",&nbsp;Helvetica,&nbsp;sans-serif</code>. This is often called a <em>font stack</em>.</p>

	<p>Web browser uses the first font on the list that it finds installed on the computer or if available, downloads from the internet. Any others are ignored.</p>

	<p>Generally at least one font is selected that is commonly installed the Machintosh and Windows operating system. In this  font stack case <code>Arial,&nbsp;Helvetica,</code> the first is a likely installed Windows font and second is a likely installed Macintosh font.</p>

	<h3>Generic family names</h3>
	<p>It is possible that the web browser may not find a font in the list. As a result specifying a generic font name at the end of the list allows the web browser to use a default font installed in the computer. Generic family names are <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> and <code>monospace</code>.</p>

</body>
</html>

The changes are shown in bold.

The issue with this approach is that it also identifies font names as computer code. Perhaps a font stack could be considered computer code if you also included as part of a full CSS property declaration.

The best solution is to create a class for styling and then apply the class to either the span or the code code element as content meaning directs.

Complete and Continue