What Is A Font Family?

Date First Published: 6th October 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 5/10

Learn more about what a font family is in this article.

A font family is a CSS property that specifies the font for an element. It determines the font face used to render characters in a HTML document. The font family is also available in the deprecated <font> </font> element. The list of fonts is separated with commas in both HTML and CSS and to avoid unexpected results, the last font family should always be a generic family. Web browsers will use their default fonts if the font cannot be found and no generic family is specified.

Types Of Font Families

There are two types of font families, which include:

• Family-name - This is the name of a font-family, such as 'arial', 'verdana', 'courier', etc.
• Generic-family - This is the name of a generic font family, such as 'serif' 'sans-serif', 'monospace', etc. These are the fonts that will be displayed if the specified font is unavailable and ensure the typographic design is maintained even if the font fails to load. For example, if a font that contains the generic-family 'serif' is specified, the website would use whatever serif font it could find if the font failed to load. It will try to automatically choose a similar font in the generic family. Examples of serif fonts are Georgia and Times New Roman. Generic fonts are a class of different fonts, not a specific font name.

Examples

In the example below, the font family for paragraphs is specified in CSS. It can be added to an external stylesheet or within the head of the HTML document:

In the second example, the font-family is only applied to that specific element, which is known as an inline style:

The output of the text can be seen below:

Example text formatted with inline CSS.