How to add multiple font files for the same font ? - GeeksforGeeks

10 Sep, 2020
@font-faceIn CSS, it is a rule that specifies a custom font. This allows us to expand our scope beyond the web-safe fonts.In this rule, @font-face must be first defined and then webpage elements can be made to refer to it as required.
Objective:To define multiple font files under the same font name.Framing this in a more understandable way, what we are trying to do here is that if we want to display a specific font in multiple other ways like bold, italics, etc. traditionally we must define them separately. But, here we will look at a way to combine these font files in a single font name.
The following example shows how different font files with the same are usually employed:
Example 1:
<!DOCTYPE html><html>   <head>    <style>        @font-face {            font-family: "quicksandregular";            src: url("quicksand-regular-webfont.woff2")               format("woff2"),               url("quicksand-regular-webfont.woff")              format("woff");            font-weight: normal;            font-style: normal;        }          @font-face {            font-family: "quicksandbold";            src: url("quicksand-bold-webfont.woff2")               format("woff2"),              url("quicksand-bold-webfont.woff")               format("woff");            font-weight: normal;            font-style: normal;        }          @font-face {            font-family: "quicksanditalic";            src: url("quicksand-italic-webfont.woff2")               format("woff2"),               url("quicksand-italic-webfont.woff")               format("woff");            font-weight: normal;            font-style: normal;        }          .first {            font-family: "quicksandregular";            color: green;        }          .second {            font-family: "quicksandbold";            color: green;        }          .third {            font-family: "quicksanditalic";            color: green;        }    </style>    </head>    <body>        geeks for geeks        <div class="first">geeks for geeks</div>        <div class="second">geeks for geeks</div>        <div class="third">geeks for geeks</div>    </body></html>
Output:
In the above program for each font file of the same font, we had to define multiple files with different names and then refer them accordingly.
The piece of code depicts how just by using a single font name multiple files can be used.These changes need to be done in the extracted CSS file of a specific font file.
Example 2:
<!DOCTYPE html><html>    <head>        <style>            @font-face {                font-family: "quicksand";                src: url("quicksand-regular-webfont.woff2")                   format("woff2"),                   url("quicksand-regular-webfont.woff")                   format("woff");                font-weight: normal;                font-style: normal;            }              @font-face {                font-family: "quicksand";                src: url("quicksand-bold-webfont.woff2")                  format("woff2"),                   url("quicksand-bold-webfont.woff")                   format("woff");                font-weight: bold;                font-style: normal;            }              @font-face {                font-family: "quicksand";                src: url("quicksand-italic-webfont.woff2")                   format("woff2"),                   url("quicksand-italic-webfont.woff")                  format("woff");                font-weight: normal;                font-style: normal;            }              .first {                font-family: "quicksand";                color: green;            }              .second {                font-family: "quicksand";                font-weight: bold;                color: green;            }              .third {                font-family: "quicksand";                font-style: italic;                color: green;            }        </style>    </head>    <body>        geeks for geeks        <div class="first">geeks for geeks</div>        <div class="second">geeks for geeks</div>        <div class="third">geeks for geeks</div>    </body></html>
Output:
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to fetch data from localserver database and display on HTML table using PHP ?
How to Create Time-Table schedule using HTML ?
Search Bar using HTML, CSS and JavaScript
Express.js express.Router() Function
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React