Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Use @font-face Rule to Load External Fonts For Your Webpage

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-familyname of the font
srcURL to download font
formatfont 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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268