How to add multiple font files for the same font using CSS?

HTML CSS Web Development Front End Technology

When designing a website, typography plays a crucial role in creating an aesthetically pleasing and easy-to-read layout. However, different browsers and operating systems may not support the same font files. To ensure that your website is displayed correctly across all devices, it is important to include multiple font files for the same font. In this article, we will go over two approaches for adding multiple font files for the same font using CSS.

Approaches

We will be discussing three approaches by which we can add multiple font files for the same font using CSS. They are as follows −

Using the @font-face rule
Using CSS3's @import rule
Using a web font service

Let us discuss each of these approaches in depth using examples and code.

Approach 1: Using the @font-face rule

The first approach for adding multiple font files for the same font using CSS is by using the @font-face rule. This rule allows you to import a custom font from an external file and apply it to specific elements on your web page.

Example

Here, we will go through a step-by-step example to implement this approach −

Step 1 − Create a folder named “fonts” in your project directory using file explorer and upload your font files to it. Make sure to include different file types such as .ttf, .woff, and .eot.

For this example sake, we will be using the Sofia Sans font from Google Fonts.

Step 2 − In your CSS (style.css) file, use the @font-face rule to import the font files. The syntax for this rule is as follows −

@font-face {
      font-family: 'Sofia Sans';
      src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
      url('fonts/Sofia_Sans/OFL.txt') format('woff')
   }

Step 3 − Apply the imported font to specific elements on your web page using the font-family property.

h1, h2 {
   font-family: 'Sofia Sans', sans-serif
}

Step 4 − The final code would look something like this −

index.html file −

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Fonts Example</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <h2>This font is called Sofia Sans</h2>
</body>
</html>

font.css file −

@font-face {
   font-family: 'Sofia Sans';
   src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
   url('fonts/Sofia_Sans/OFL.txt') format('woff')
}

style.css file −

h1, h2 {
      font-family: 'Sofia Sans', sans-serif
   }

Approach 2: Using CSS3's @import rule

The second approach for adding multiple font files for the same font using CSS is by using the @import rule. This rule allows you to import a CSS file from an external location and apply it to your web page.

Example

Here, we will go through a step-by-step example to implement this approach −

For this example sake, we will be using the Sofia Sans font from Google Fonts.

Step 2 − Create a new CSS file named “fonts.css” in the “fonts” folder and use the @font-face rule to import the font files.

@font-face {
   font-family: 'Sofia Sans';
   src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
   url('fonts/Sofia_Sans/OFL.txt') format('woff')
}

Step 3 − In your main CSS (style.css) file, use the @import rule to import the “fonts.css” file.

@import url('fonts.css');

Step 4 − Apply the imported font to specific elements on your web page using the font-family property.

h1, h2 {
   font-family: 'Sofia Sans', sans-serif
}

Step 5 − The final code in a single HTML file and two CSS files would look something like this −

index.html file −

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Fonts Example</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <h2>This font is called Sofia Sans</h2>
</body>
</html>

style.css file −

@import url('fonts.css');
h1, h2 {
   font-family: 'Sofia Sans', sans-serif
}

fonts.css file −

@font-face {
   font-family: 'Sofia Sans';
   src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
   url('fonts/Sofia_Sans/OFL.txt') format('woff')
}

Approach 3: Using a web font service

Another approach to adding multiple font files for the same font using CSS is by using a web font service. These services, such as Google Fonts or Adobe Fonts, allow you to easily import and use a variety of fonts on your website without the need to host the files yourself.

Example

Here, we will go through a step-by-step example to implement this approach −

Step 1 − Go to a web fonts service like Google Fonts or Adobe Fonts and select the desired font.

For this example sake, we will be using the Sofia Sans font from Google Fonts.

Step 2 − Select the fonts you want you to want to add to your webpage by clicking on “+” icon beside the font name.

Step 3 − Open the “view selected families” icon on the top right corner and apply the imported font to specific elements on your web page using the font-family property by adding the pre-connect and stylesheet links to your index.html file.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@100;200&display=swap" rel="stylesheet">
h1, h2 {
 font-family: 'Sofia Sans', sans-serif;
}

Step 4 − The final code in a single HTML file will look like this −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Font Example</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@100;200&display=swap" rel="stylesheet">
   <style>
      h1, h2 {
         font-family: 'Sofia Sans', sans-serif;
      }
   </style>
</head>
<body>
   <h1>Welcome to Tutorials Point!</h1>
</body>
</html>

Note − This approach simplifies the process of adding multiple font files as the web font service will handle that for you and you only need to import the font using a link or a CSS file provided by the service.

Conclusion

In this article, we discussed different ways how to add multiple font files for the same font using CSS. The first approach was using the @font-face rule, which allows you to import a custom font from an external file and apply it to specific elements on your web page. The second approach was using CSS3's @import rule, which allows you to import a CSS file from an external location and apply it to your web page and the third approach is to use a web font service like Google Fonts to easily get the job done.