Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Multiple Font Files for the Same Font Using CSS
To add multiple font files for the same font using CSS, is essential to display your webpage correctly across all devices. For this purpose it is important to include multiple font files for the same font.
In this article, we will be understanding two different approaches to add multiple font files for the same font using CSS.
Approaches to Add Multiple Font Files for Same Font
Here is a list of approaches to add multiple font files for the same font using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Adding Multiple Font Files Using @font-face Rule
To add multiple font files for the same font using CSS, we have used CSS @font-face rule which allows us to use custom fonts not available in standard web-safe font options.
- Create a folder in your project directory and upload your font files to it. Include different file types such as .ttf, .woff, and .eot.
- We have used @font-face rule to import the font files. Set the font-family and url of the font files.
- Then, we have used element type selectors (h3, h4) to specify the font-family of the text.
Example
Here is a complete example code implementing above mentioned steps to add multiple font files for the same font using @font-face rule.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Fonts Example</title>
<style>
@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')
}
h3, h4 {
font-family: 'Sofia Sans', sans-serif
}
</style>
</head>
<body>
<h2>
Adding Multiple Font Files for Same Font Using CSS
</h2>
<p>
In this example we have used <strong>@font-face</strong> rule
to add multiple font files for the same font using CSS.
</p>
<h3>Welcome to Tutorials Point</h3>
<h4>This font is called Sofia Sans.</h4>
</body>
</html>
Adding Multiple Font Files Using Web Font Service
In this approach to add multiple font files for the same font using CSS, we have used Google fonts.
- We will be using web fonts service like Google Fonts or Adobe Fonts and select the desired font.
- Select the fonts you want you to want to add to your webpage by clicking on "+" icon beside the font name.
- Then we have used the CSS selectors with CSS font-family property to apply fonts.
Example
Here is a complete example code implementing above mentioned steps to add multiple font files for the same font using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Multiple 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>
h3, h4 {
font-family: 'Sofia Sans', sans-serif;
}
</style>
</head>
<body>
<h2>
Adding Multiple Font Files for Same Font Using CSS
</h2>
<p>
In this example we have used <strong>Google fonts</strong>
to add multiple font files for the same font using CSS.
</p>
<h3>Welcome to Tutorials Point</h3>
<h4>This is the second example in this article.</h4>
</body>
</body>
</html>
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 and the second approach is to use a web font service like Google Fonts to easily get the job done.
13K+ Views
