CSS Web Fonts

CSS web fonts provide web designers with the ability to use fonts that are not installed on the user's computer. Here's how you can use web fonts in CSS:

Obtain the Font: When you have found or purchased the font you wish to use, include the font file on your web server.
Automatic Download: The font file will be automatically downloaded to the user's device when needed. This ensures that the font is available for rendering on the web page.
Define @font-face Rule: To use your own fonts, define the @font-face rule in CSS. Specify the font family name and provide the path to the font file using the src property. For example:
```
@font-face {
  font-family: 'MyWebFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
}
```
Apply the Font: Once the @font-face rule is defined, you can use the font by specifying the font family name in your CSS styles for different elements.

Types of font format

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

Format	Description
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 font families from web font services like Google Fonts. The @import rule is placed in the <style> tag.

To import a single font family, use the following syntax:

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

To request multiple font families, separate the names with the pipe (|) character:

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

Alternatively, we can also use the HTML <link> tag to include Google Fonts in an HTML file. Here's an example:

This example imports the Lobster font family from Google Fonts.

Using the @import rule or the <link> tag with the appropriate URL, we can import font families from web font services and apply them to our web page for consistent and visually appealing typography.

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>

Test Yourself

Output:-

Below is an example illustrating the use of Google fonts within a 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>

Test Yourself

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>

Test Yourself

Output:-

Help Us to Improve our content

Let's Talk

CSS Web Fonts

Types of font format

Using @ import

Help Us to Improve our content

Important Links

Company

Others

Explore

CSS Web Fonts

Types of font format

Using @ import

Help Us to Improve our content

Important Links

Follow us on social :

Company

Others

Explore

Subscribe to Our News Letter!

Follow us on social :