How to Use Fonts in CSS (@font-face)

css

How to Use Fonts in CSS (@font-face)

March 6, 2023

This guide is part of the "Snippets" series. This series is focused on providing simple and accessible tutorials on various topics relating to development!

Using the @font-face rule in CSS allows you to specify a custom font that can be used on your website or web application.

Here are the steps to use fonts in CSS using the @font-face rule:

Find the font you want to use: You can download a font file from a font provider, such as Google Fonts, Adobe Fonts, or Font Squirrel. Make sure you have the proper licensing to use the font.
Upload the font files: Upload the font files to your website or web application. You can store them in a directory such as “fonts” or “assets”.
Define the @font-face rule: In your CSS file, define the @font-face rule and specify the path to the font files using the src property. You can also set other properties such as font-weight, font-style, and font-display.

Example:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Use the font in your CSS: Once you have defined the @font-face rule, you can use the font in your CSS by specifying the font-family property with the name you gave in the @font-face rule.

Example:

body {
  font-family: 'MyCustomFont', sans-serif;
}

In this example, the font-family property is set to ‘MyCustomFont’ which is the name specified in the @font-face rule. The fallback font is sans-serif in case the custom font fails to load.

Lets look at some other examples.

Using local fonts

The @font-face rule in CSS allows you to specify a custom font to be used on your website or web application. The src property of the @font-face rule is used to define the source of the font file, but it can also be used to specify the name of the font as it is installed on the user's computer.

This is useful because if the user already has the desired font installed on their computer, it can be used instead of downloading the font file from the server. This can significantly increase the speed of loading and rendering the page, as the font is already available on the user's system.

Here's an example:

Suppose you want to use the font "Open Sans" on your website, and you have both the regular and bold font files. You can define the @font-face rule as follows:

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'), 
       url('/fonts/OpenSans-Regular.ttf') format('truetype'),
       url('/fonts/OpenSans-Bold.ttf') format('truetype');
}

In this example, the font-family property is set to 'Open Sans', which is the name of the font that will be used throughout the website. The src property has three values:

The first value, 'local('Open Sans')', specifies that if the user already has a font installed on their system with the name 'Open Sans', that font should be used. This can save time and bandwidth, as the font file does not need to be downloaded from the server.
The second value, 'url('/fonts/OpenSans-Regular.ttf')', specifies the URL of the font file to be used for the regular weight of the font.
The third value, 'url('/fonts/OpenSans-Bold.ttf')', specifies the URL of the font file to be used for the bold weight of the font.

By specifying 'local('Open Sans')' as the first value, the browser will first check if the user has the 'Open Sans' font installed on their system, and if so, it will use that font instead of downloading the font files from the server. This can significantly improve the speed of loading and rendering the page, as the font file does not need to be downloaded.

Font formats

Font formats are digital file formats used to store and display fonts on digital devices such as computers, smartphones, and tablets. The purpose of font formats is to allow designers and developers to use custom fonts in their digital designs and web pages, without relying solely on the limited set of fonts that are available on the user's device.

Each font format has its own set of features and characteristics that make it suitable for specific use cases. For example, some font formats are optimized for use on the web, while others are better suited for print. Font formats may also differ in terms of file size, compression, and compatibility with different devices and browsers.

Font Format	Description
`TrueType (.ttf)`	One of the most widely used font formats, developed by Apple and Microsoft. TTF fonts can be used on both Mac and Windows platforms.
`OpenType (.otf)`	Similar to TTF format, but includes more advanced features such as ligatures, alternate glyphs, and variable fonts. Developed jointly by Microsoft and Adobe.
`Web Open Font Format (.woff)`	A font format specifically designed for use on the web. WOFF fonts can be compressed, making them smaller and faster to download.
`Web Open Font Format 2 (.woff2)`	An updated version of the WOFF format, providing better compression and improved performance.
`Embedded OpenType (.eot)`	A font format developed by Microsoft for use with Internet Explorer. EOT fonts are encrypted and compressed, making them smaller and faster to download.
`Scalable Vector Graphics (.svg)`	A vector-based font format that can be used for both print and web design. SVG fonts can be resized without losing quality, and are supported by most modern browsers.

Note that not all browsers support all font formats, so it's important to include multiple font formats in the @font-face rule to ensure that the font will be displayed correctly on all devices and browsers.

Which font format to use and when?

Here is a table that shows the use case for each font format type:

Font Format	Best Use Case
`TrueType (.ttf)`	Suitable for use on both Mac and Windows platforms, and can be used for both print and digital design.
`OpenType (.otf)`	Best for advanced typography features such as ligatures, alternate glyphs, and variable fonts. Can be used for both print and digital design.
`Web Open Font Format (.woff)`	Specifically designed for use on the web. WOFF fonts can be compressed, making them smaller and faster to download. Best for web typography.
`Web Open Font Format 2 (.woff2)`	An updated version of the WOFF format, providing better compression and improved performance. Best for web typography.
`Embedded OpenType (.eot)`	Best for use with Internet Explorer, as this format was specifically developed by Microsoft for IE. EOT fonts are encrypted and compressed, making them smaller and faster to download.
`Scalable Vector Graphics (.svg)`	Best for use on the web, and can be used for both print and digital design. SVG fonts can be resized without losing quality, and are supported by most modern browsers. Best for responsive design.

Font styles

CSS offers a wide range of font styles and properties that can be used to customize the typography on a website or web application.

Some of the most common CSS font properties include:

CSS Font Property	Description
`font-family`	Specifies the font to be used for the text. Multiple fonts can be listed in order of preference.
`font-size`	Specifies the size of the font, typically in pixels or points.
`font-style`	Specifies the style of the font, such as normal, italic, or oblique.
`font-weight`	Specifies the weight of the font, such as normal, bold, or a numeric value.
`font-variant`	Specifies the variant of the font, such as normal or small-caps.
`font-stretch`	Specifies the width of the font, such as normal, condensed, or expanded.
`font-display`	Specifies how the font should be displayed while it is loading, including values such as auto, swap, fallback, and optional.

Here are some of the most common CSS font styles:

Regular:

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular.ttf') format('truetype'),
       url('/fonts/OpenSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Open Sans', sans-serif;
}

Italic:

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Italic.ttf') format('truetype'),
       url('/fonts/OpenSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

em {
  font-family: 'Open Sans', sans-serif;
}

Bold:

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Bold.ttf') format('truetype'),
       url('/fonts/OpenSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

strong {
  font-family: 'Open Sans', sans-serif;
}

Bold Italic:

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-BoldItalic.ttf') format('truetype'),
       url('/fonts/OpenSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

strong em {
  font-family: 'Open Sans', sans-serif;
}

And here is what that looks like:

This text is in regular font style.

This text is in italic font style.

This text is in bold font style.

This text is in bold italic font style.