How to download and apply a web font in CSS

Hi, In this tutorial, I am going to teach you how to download and apply a web font in CSS.

Generally, web fonts allow the designers to use the font without installation on the user's computer. We have to use our own fonts by using the @font-face rule

This @font-face rule is supported by the all major browsers, Chrome, Internet Explorer, Mozilla, Safari, Opera
There are 4 different web font formats available
1. TrueType Fonts (TTF)
2. OpenType Fonts (OTF)
3. The Web Open Font Format (WOFF)
4. Embedded OpenType Fonts (EOT)
Here TTF, OTF, WOFF are supported to the all major browsers. Remaining web font formats are not supportable for all browsers.

How to Download a web font
If you want to download a web font use the font squirrel website font squirrel. Here search your desired web font ex: Open Sans

Now will find the no.of fonts related to Open Sans like Open Sans Light, Open Sans Light Italic, Open Sans Regular, Open Sans Italic, and so on.Now click on DOWNLOAD TTF button.It will download the all Open Sans fonts.

Now Extract the zip file and upload the fonts to the generator in the font squirrel. Then it will convert the TTF fonts to WOFF. WOFF is the regular usage font format on the web. Now extract the downloaded file and see the example code.

How to Apply a web font
Now copy the all .woff, .woff2 files and stylesheet.css file to your project.
Now link the stylesheet.css to your index page in header and apply the font to the body.

<html>  
   <head>  
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />  
    <style type="text/css">  
      body{  
      font-family: 'open_sansregular';  
      }  
    </style>  
    <title>Open Sans Regular</title>  
   </head>  
   <body>  
    <h1>WelCome</h1>  
   </body>  
 </html>

Watch Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

Share this