CSS Property @font-face
We can use @font-face to add font to web page and don't need to depend on the "web-safe" fonts.
CSS Syntax
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Property Values
- font-family
- Required. the font name.
- src
- Required. Set URL(s) to download font
- font-stretch
- Possible values:normal|condensed|ultra-condensed|extra-condensed|semi-condensed|expanded|semi-expanded|extra-expanded|ultra-expanded. Optional. how to stretch the font. Default to "normal"
- font-style
- Possible values:normal|italic|oblique. Optional. how to style the font. Default is "normal"
- font-weight
- Possible values:normal|bold|100|200|300|400|500|600|700|800|900. Optional. Defines the font weight. Default is "normal".
- unicode-range
- Optional. Declare the unicode characters which is supported by the font. Default value is "U+0-10FFFF"
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
TTF/OTF fonts |
Yes | Yes | Yes | Yes | Yes |
WOFF fonts |
Yes | Yes | Yes | Yes | Yes |
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");
}<!--from w w w . j a v a2 s .com-->
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>