How to add multiple font files for the same font ?

@font-face
In 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.