CSS Web Fonts

These type of fonts allow web designers to use fonts that are not installed on the user’s computer.

When we have found/ bought the font we wish to use, include that font file on your web server.

Then it will be automatically downloaded to the user when needed. Our “own” fonts are defined within the CSS @font-face rule.


Types of font format

There are different types of font format which needs to added while using web fonts in our application.

FormatDescription
True Type Fonts (TTF)most common font format for both the Mac OS and Microsoft Windows operating systems.
Open Type Font (OTF)format for scalable computer fonts and used commonly today on the major computer platforms
Web Open Font Format (WOFF)font format for use in web pages. It is essentially OpenType or TrueType with compression and additional metadata.
Web Open Font Format (WOFF 2.0)  provides better compression than WOFF 1.0
SVG Fonts/Shapes  allow SVG to be used as glyphs when displaying text. We can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents
Embedded OpenType Fonts (EOT)  compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Using @ import

We can import the font family from the web font service such as Google fonts. It is to be placed in the <style> tag.

@import url('https://fonts.googleapis.com/css?family=Lobster'); 

For requesting multiple font families, the names should be separate from the pipe (|) character. For example –

@import url('https://fonts.googleapis.com/css?family=Roboto|Inconsolata|Open+Sans’); 

Below is the example illustrating the use of Google fonts within HTML file link tag.

Input:-

<!DOCTYPE html>
<html>
   <head>
      <title>This page title</title>
      <link href= 'https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' />
      <style>
        .roboto {   
           font-family: Roboto;
		}  
      </style>
   </head>
   <body>   
      <p>   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English  
      </p>  
      <p class="roboto">   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.   
      </p>  
   </body>
</html>

Output:-

Below is the example illustrating the use of Google fonts within CSS file using @import.

Input:-

<!DOCTYPE html>
<html>
   <head>
      <title>This page title</title>
      <style>
		@import url(‘https://fonts.googleapis.com/css?family=Lobster|Great+Vibes|Satisfy|Inconsolata|Open+Sans’);
        .satisfyFont {   
           font-family: Satisfy;
		}  
		.inconsolataFont {  
		  font-family: Inconsolata;  
		}  
      </style>
   </head>
   <body>   
      <p class=”satisfyFont”>   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English  
      </p>  
      <p class="inconsolataFont">   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.   
      </p>  
   </body>
</html>

Output:-

Below example illustrate the use of font family by storing the files as ttf, otf format file with the help of @font-face

Input:-

<!DOCTYPE html>
<html>
   <head>
      <title>This page title</title>
      <style>
		@font-face {
           font-family: Open Sans;
           src: url(OpenSans.woff);
        }
        .openSansFont {   
           font-family: Open Sans;
		}  
      </style>
   </head>
   <body>   
      <p>   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English  
      </p>  
      <p class="openSansFont">   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.   
      </p>  
   </body>
</html>

Output:-