Open In App

How to add some non-standard font to a website in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

We can not use every font (non-standard font) on our websites because every font is not supported on every system. To deal with this problem i.e. use any font of our choice, we can follow these approaches.

Approach 1: Use CSS Font Face: In this, we can define a new font family and give it a name of our choice. We just have to upload the font file along with our source code to the server. You can refer to this article to know more about @font-face. While using @font-face firstly give this a name and the path of the font file, apart from these two some other parameters can also be added. To give path of the font file firstly we have to download it into our system, we can download our desired font file from “font squirrel” or any other website, and then we have to give the path of this font file in our “src”. Whenever we will upload our website to the server then we have to upload the font file also and give its path in “src” of @font-face. Using this we can define a new font family and use it on our website and it will be displayed on our website even if users doesn’t have this font on their system.

Syntax:

@font-face {
    font-family: Name_of_font-family;
    src: url(path of fontFile);
}

Note: This example will not produce the same output in another system as it is using “src: url(Lobster_1.3.otf)“.

Prerequisites: To use “Lobster_1.3.otf” on your system follow these steps:

Step 1: Go to Font Squirrel, Search “Lobster” and download it by clicking on download OTF

 

Step 2: After Downloading give the path of the font file along with its extension in the src of @font-face.

For any other font also you can follow same steps, font files may have different extensions also like .ttf, .otf, .woff, .woff2, .svg, .eot, so in different cases give extension accordingly.

Example: This example will use the CSS Font Face to add some non-standard font to a website:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Font Face CSS</title>
    <style>
        @font-face {
            /* Give a name for this font family */
            font-family: f1;
            src: url(Lobster_1.3.otf);
        }
  
        h1 {
            font-family: f1;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <p>A Computer Science Portal for Geeks</p>
</body>
  
</html>


Output:

 

Here when this web page is loaded then the font family that we had made will be used by taking it from the path that we had provided in src. As we had provided the new font family only to the h1 tag so we can see that only h1 has changed.

Approach 2: Using Google fonts

We can use google fonts for this, in this approach we just have to import our desired font family from the google font’s website to our HTML file this can be done in some ways which are discussed in this article. After importing it we can use it in our styling, in this way we can use any font on our website and it will be displayed at the user’s end even if they don’t have that font on their system.   

Syntax:

<link href="link of font family" rel="stylesheet">

Example: This example will use the Google Fonts to add some non-standard font to a website:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Using Google Font</title>
  
    <!-- import font -->
    <link href=
"https://fonts.googleapis.com/css2?family=Lobster&family=Roboto+Mono&family=Ubuntu:wght@300&display=swap"
        rel="stylesheet">
  
    <style>
        h1 {
            font-family: 'Lobster';
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <p>A Computer Science Portal for Geeks</p>
</body>
  
</html>


Output:

 

Here when this web page is loaded, the font is used from the link that we had provided in that head of our HTML. As we had provided the imported font family only to the h1 tag so we can see that only h1 has changed.

Using these two approaches we can add any font to our website.



Last Updated : 17 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads