CSS Tutorial - CSS3 Web Fonts

The @font-face CSS3 at-rule allows us to specify online fonts to display text on web pages.

@font-face eliminates the need to depend on fonts installed on visitors' computers.

Example

This example simply specifies a downloadable font to use, applying it to the entire body of the document.


<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }<!-- ww w  .j a  va 2 s . c  o m-->
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

The code above is rendered as follows:

Note

Web fonts are subject to the same domain restriction.

Font files must be on the same domain as the page using them, unless HTTP access controls are used to relax this restriction.