Define two @font-face sections - 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

Define two @font-face sections

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;
    }<!-- w w w .  ja  v  a 2s .c o  m-->
    @font-face {
        font-family: "OpenSansBold";
        src: url("../fonts/OpenSans-Bold.eot");
    src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
    font-weight: normal;
      font-style: normal;
    }
    h1 {
        font-family: "OpenSansBold", Arial, sans-serif;    /* Specify the OpenSans bold font */
    }
    p {
        font-family: "OpenSans", Arial, sans-serif;
    }
</style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials