CSS font-family: The Font Family Property

The CSS font-family property specifies the font for HTML elements as a prioritized list.

How to Use CSS font-family

The font-family property allows you to specify a list of fonts, ordered by priority and separated by commas. If the browser fails to recognize a font, it tries the next font in the list.

As values, you can use family names like Arial and Helvetica or generic names like serif and sans-serif. Use quotes (") for font family names with spaces to ensure your web page works across browsers.

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

When to Use CSS font-family

You need the font-family property to control the font of elements or entire web pages.

Branding

Fonts can be a significant part of a brand’s identity. Using of the same font-family property across your website can reinforce your brand’s style.

body {
    font-family: Arial, sans-serif;
}

Readability

For long reading sections, you can specify a font that’s easy on the eyes to improve your content’s readability. Serif fonts tend to work well in long-form articles, while shorter texts can benefit from using sans-serif fonts.

.article {
    font-family: "Times New Roman", serif;
}

Enhancing Aesthetics

Different typefaces can significantly affect the aesthetics of your web page, influencing how users perceive its design and usability.

.heading {
    font-family: "Futura", "Trebuchet MS", Arial, sans-serif;
}

Examples of Font Family in CSS

Almost every website on the internet uses the font-family CSS property give their web pages a brand-specific aesthetic.

News Websites

News websites often use easily readable fonts to ensure that readers can comfortably consume large amounts of information.

.news-article {
    font-family: Merriweather, "Times New Roman", serif;
}

E-commerce Platforms

E-commerce platforms might choose modern sans-serif fonts to convey cleanliness and simplicity.

.product-description {
    font-family: "Roboto", sans-serif;
}

Programming Tutorials

Programming tutorials like Mimo might use a monospace font for code snippets to align characters in a grid:

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

Learn More About Font Family in CSS

Web-Safe Fonts

Web-safe fonts are a handful of generic font families that work across browsers and devices. By using web-safe fonts, you can minimize the risk of font-related display issues. Some of the most common web-safe fonts are:

• Arial: Often used as a sans-serif alternative to the default serif font on many computers.
• Verdana: Known for its wide, open letterforms, making it easy to read on screens.
• Times New Roman: A default serif font on many devices, suitable for more formal or traditional content.
• Courier New: A monospaced font, useful for displaying code.

.body-text {
    font-family: Arial, sans-serif; /* Arial if available, otherwise a generic sans-serif */
}

When selecting fonts for your website, consider the nature of your content and the readability of the font on screens. Creating a font stack with multiple fallback fonts ensures that your webpage has a suitable font available, regardless of the user's system:

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

Custom Fonts in CSS

For unique branding and design flexibility, you can also add custom fonts faces into your stylesheet. To use a custom font, you define it with the @font-face rule in CSS, specifying the font name, source files, and style characteristics.

/* Defining normal weight and style */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Defining bold weight */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* Defining italic style */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

/* Using the custom font in HTML elements */
.body-text {
    font-family: 'MyCustomFont', sans-serif;
}

.bold-text {
    font-family: 'MyCustomFont';
    font-weight: bold;
}

.italic-text {
    font-family: 'MyCustomFont';
    font-style: italic;
}

Importing Web Fonts

Web fonts, such as those available from Google Fonts, allow you to use custom fonts without having to host the font files yourself. Additionally, using services like Google Fonts can improve performance by leveraging their optimized delivery networks.

To import a web font, create an @import statement at the beginning of your stylesheet. As the source, use a URL that specifies your web font’s family and weights.

/* Adding a Google Font to your CSS */
@import url('<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>');

/* Using the imported font in your stylesheet */
.body-text {
    font-family: 'Roboto', sans-serif;
}

.bold-text {
    font-family: 'Roboto';
    font-weight: 700;
}