css - HTML

An Introduction to Font Families

In this introductory tutorial on HTML/CSS Font Families, we will explore some easy to use, creative applications to further enhance the text on your web page. Fonts are more important than one may think.

The fonts we use in design are carefully chosen for particular types of writing and for what we are writing about. Psychologically, there is a subliminal message when we use a particular font. A font may convey romance, horror, or something whimsical. Let’s explore what a font family is, how to utilize it in HTML, and what options we have to convey what we desire.

The Font Family

How Font-Family Works

  • The font-family property specifies the font for an element such as <h1> which would set the font for Header 1.
  • The font-family property can hold several font names in order to accommodate different browsers which may only accept certain fonts. If the browser does not support the first font, it will try the next font.

Two Types of Font Family Names

  • family-name – The name of a font-family such as: “times,” “courier,” “arial,” etc.
  • generic-family – The name of a generic-family such as: “serif,” “sans-serif,” “cursive,” “fantasy,” “monospace.”

Tip: When laying out a font-family into your HTML, start with the fonts you most desire, and end with a generic family. This allows the browser to pick a similar font in the generic family if no other fonts are available.

Remember that you must always separate each font value with a comma.

This image has an empty alt attribute; its file name is rDNzh2Jo_JKT-NCtGUolXW8QVzVDnHScVVteUQQ4b1C8IhUhJSIqbSimRB68sKO47f32rbUxpCXAQdmN_2tzFMr2TevBYi-CsBtbQjgPfEkxq1pa5__AdtBcJ5a1JMGI0DgtwiBs

Incorporating a Font-Family into CSS

We will start with a full HTML page using the following code sample:

The CSS and HTML interact in the following way in order to properly display the text with your desired font family.

The web output from this code would display as follows:

Exploring Font Families

In CSS there are five generic font families:

Serif and Sans-Serif Fonts

Differentiating Between the Two

A serif is a slight projection finishing off a stroke of a letter in certain typefaces.

The word “Sans” is Latin meaning “without.” Sans-Serif literally means “without the serif.”

Tip: For online web text, especially in the case of paragraph text, a simple Sans-Serif font is easier to read.

Incorporating a Font-Family into HTML

There is an alternative way to utilize a specific font. We can add a font or font family inline within the HTML itself without adding to the CSS. This is done using the Span element.

<span style="font-size:150%;font-family:Arial,sans-serif">Arial</span>

HTML Span Etiquette

HTML is very temperamental and failure to follow any of the rules can result in the web content not displaying properly. 

Remember the following when writing your HTML for the Span Element.

  • Remember that for all HTML elements, you must open and close the element as in the following: <span style=”color:orange;”> text here </span>

  • Additionally, each Style (or group of styles) you use within your Span Element needs to be wrapped in quotes.

  • Also, make sure you use a semicolon to separate your Styles. In this case, we are separating font-size from font-family.

  • Use a comma to separate fonts. In this case we are separating Arial from sans-serif.

Utilizing <Span> to Style Inline Text

The following code sample displays the inline Span Element. In this example, we can stylize any text we want. Instead of creating a variety of CSS styles, we simply add this element inline with the text anywhere we want and create text to display in your designated font. 

You may copy the code below to practice with:

<!DOCTYPE html>
<html>
<body>

<span style="font-size:150%;font-family:Arial,sans-serif">Arial</span>

</body>
</html>

This simple code displays on a web page as follows without the help of any CSS.

The end result is the ability to use a font of your choice that will work with your web browser, all within the context of a line of HTML.

Also See: HTML/CSS Class and ID Selectors

Where to Next?

This introduction to Font-Family should provide a starting point for further inquiry into the unlimited creative aspects that HTML offers. We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.

Enroll in our Intro to Programming Nanodegree program today!

Start Learning