Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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:
• Easy CSS 3D Mouse-over Pressed Text Effect
• Add Background Color to a Heading
• How to Style a Table
• How to Overlay Text on an Image
• Easy Text Drop Shadows
• How to Color Alternating Rows or Columns in a Table
• Basic Introduction to Simple Responsive Design With Code
• Using Google Fonts
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property
• How to Use a Starburst on Your Web Page