Use @font-face Rule to Load External Fonts For Your Webpage
By Stephen Bucaro
In the past, web designers were restricted to a small group of fonts referred to as
"web-safe". Web-safe fonts are the standard fonts installed with the Windows and Mac
operating systems. With the CSS @font-face rule, web designers can load fonts from
external sources, they no longer have to use one of the web-safe fonts.
Now is the time for all good men to come to the aid of their country.
All commonly used modern browsers support the @font-face rule. With the @font-face rule,
you can load TTF (TrueType Fonts), OTF (OpenType Fonts), or WOFF (Web Open Font Format)
fonts. Of these, the preferable one is WOFF because of its greater file compression. Shown
below is the syntax for the @font-face rule.
@font-face
{
font-family: FontName;
src: url('/path/fontname') format('fonttype');
}
| font-family | name of the font |
| src | URL to download font |
| format | font file format |
Shown below is example code for a webpage that uses a WOFF font.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
@font-face
{
font-family: ChunkFive;
src: url('ChunkFive.woff') format('woff');
}
.webfont
{
font-family: ChunkFive, sans-serif;
font-size:36px;
}
</style>
</head>
<body>
<p class="webfont">Now is the time for all good men to come to the aid of their country.</p>
</body>
</html>
Note the font used is ChunkFive. This font file was downloaded from
The League of Moveable Type,
one of the few places where you can acquire free fonts. Also note that in the style class definition,
sans-serif is also listed. This is for a substitute font in case the @font-face defined
font can't be loaded.
More Easy Cascading Style Sheets:
• CSS 3D Rotation Examples
• Make a Fixed-width Variable-height Round Cornered Box
• How to Style a Table
• Code to Move the Scrollbar to the Left Side
• Easy Text Drop Shadows
• Create a Cool Picture Frame Effect with CSS
• Style Your Imagemap Tooltips
• Easy Oval Image Mask With CSS
• Basic Introduction to Simple Responsive Design With Code
• Create Custom Horizontal Rules
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
