@font-face Rule - HTML CSS CSS Property

HTML CSS examples for CSS Property:font-face Rule

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. font-face Rule

Description

The @font-face rule is used to include a font.

Syntax

The syntax of this at-rule is as follows: 

@font-face:font-description

Parameters

Parameters have the following meanings:

Parameter Value Description
font-family font-family Required. Defines the font name that will be used as a font-family value.
src url Required. Set the location of a font file to use.
font-style font-style Optional. A valid font-style property value.
font-weight font-weight Optional. A valid font-weight property valu.

The example below shows the @font-face property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS @font-face rule</title>
  <style type="text/css">
  @font-face {
        font-family: "OpenSans";
        src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: normal;
      font-style: normal;
    }<!--from  w  w  w  .  j av  a2 s . c  om-->
    body {
        font-family: "OpenSans", Arial, sans-serif;
    font-size: 1.2em;
    }
</style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials