The Web Fonts offer a great flexibility to web designers to create special effects on text in a HTML document because they are not limited anymore to a small set of fonts installed on the client computers displaying the HTML document. The Web Fonts can be downloaded on the fly by the modern web browsers and used to render the HTML document without installing those fonts on the local machine. The location from where they can be downloaded is given in a CSS3 @font-face rule.
The HiQPdf HTML to PDF Converter has the capacity to convert HTML documents with Web Fonts. It offers support for TrueType fonts in .ttf files, OpenType fonts with TrueType Outlines in .otf files and Web Open Font Format (WOFF) fonts with TrueType Outlines in .woff files.
The Web Open Font Format (WOFF), as its name suggests, was designed to be used with web pages. It is based on a compression algorithm which makes the fonts file smaller and more appropriate for distribution over a network. The WOFF format is currently supported by all major browsers (Firefox 3.6 and later versions, Google Chrome 6.0 and later versions, Internet Explorer 9 and later versions, Opera 11.10 and later versions, Safari 5.1 and later versions).
Below there is a HTML document which demonstrates how to define and use web fonts in a HTML document.
HTML Document with Web Fonts
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Web Fonts </title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="A web page built using CSS3 Fonts and WOFF for typography" /> <link href="styles/style.css" rel="Stylesheet" type="text/css" /> <style type="text/css"> @font-face { font-family: FelbridgeOTSCondensed; src: url('fonts/FelbridgeOTS-Condensed.woff'); } @font-face { font-family: ITCGrimshawHand; src: url('fonts/GrimshawHand.woff'); } @font-face { font-family: FrutigerOTSRegular; src: url('fonts/FrutigerOTS.woff'); } @font-face { font-family: FrutigerOTSBold; src: url('fonts/FrutigerOTS-Bold.woff'); } @font-face { font-family: SyndorOTSCondensed; src: url('fonts/SyndorOTS-Condensed.woff'); } @font-face { font-family: Whimsy; src: url('fonts/Whimsy.woff'); } @font-face { font-family: Zoinks; src: url('fonts/Zoinks.woff'); } @font-face { font-family: HandelGothicOTS; src: url('fonts/HandelGothicOTS.woff'); } @font-face { font-family: AyitaPro; src: url('fonts/AyitaPro.woff'); } @font-face { font-family: CelesteSmallSCRegular; src: url('fonts/CelesteSmallTextScWeb.woff'); } p { margin: 0 0 1em 0; } #title { width: 700px; height: 1.2em; padding-top: 0.2em; margin: auto; margin-bottom: 0.1em; font: 30pt FelbridgeOTSCondensed, sans-serif; letter-spacing: 0.01em; text-align: center; color: white; background-color: rgb(152,155,177); } #title #and { font: 30pt ITCGrimshawHand; color: rgb(205,254,255); } #title-underline { width: 700px; margin: auto; height: 7px; background-color: rgb(101,1,101); margin-bottom: 24px; } .section { margin: auto; width: 700px; clear: both; } .section .section-margin { width: 185px; text-align: right; } .section .section-text { float: right; width: 500px; font: 11pt FrutigerOTSRegular, sans-serif; line-height: 14pt; } .section-text .pull-quote { font: bold 18pt AyitaPro, sans-serif; line-height: 21pt; color: rgb(51,1,101); } .section-text .leader { font: bold 11pt FrutigerOTSBold, sans-serif; line-height: 14pt; } #s-1 .section-margin { font: 29pt SyndorOTSCondensed, serif; line-height: 28pt; letter-spacing: 0.02em; color: rgb(101,1,101); } #s-2 .section-margin { font: 29pt Whimsy, serif; line-height: 28pt; letter-spacing: 0.04em; color: rgb(100,0,1); } #s-3 .section-margin { font: 29pt Zoinks, sans-serif; line-height: 28pt; letter-spacing: 0.07em; color: rgb(115,160,161); } #s-4 .section-margin { width: 175px; margin-left: 10px; font: bold 27pt HandelGothicOTS, sans-serif; line-height: 28pt; letter-spacing: 0.05em; color: rgb(255,153,100); } #fonts-used .section-text { margin-top: 1em; margin-bottom: 1em; font: 12pt CelesteSmallSCRegular, serif; line-height: 14pt; } </style> </head> <body id="demobody"> <div id="fullbodywrap"> <div id="ReturnAndShareControls"> </div> <table width="100%" id="headertable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="heading"> <h1 id="demobodyh1"> Web Fonts</h1> </td> </tr> </tbody> </table> <div id="demointro"> <p> The typography of this Web page is enabled by <a href="http://www.w3.org/TR/css3-fonts/" target="_blank">CSS3 Fonts</a>’ <span class="code">@font-face</span> rule and a collection of WOFF fonts. The web fonts technology enables a web page to use true type fonts which are not installed on the local computer but served by the web server. The fonts and layout of this page will not look correct in browsers that do not support Web Open Font Format (WOFF) fonts.</p> </div> <div id="demoactions"> </div> <div id="demoContentCenterer"> <div id="demoContentWrapper"> <div id="title"> Design Times <span id="and">&</span> Archaeological Intelligencer</div> <div id="title-underline"> </div> <div class="section" id="s-1"> <div class="section-text"> <p> <span class="leader">(Lyons, France; 1 April 2010)</span> – Researchers from the Institut internationale de l’identité romaine reported on Thursday that they had discovered fragments of what might be the first graphic-design manual in history.<br /> <br /> According to Jean-Claude Garamond-Jannon, head of the research team that excavated the find, it appears to be part of a manual for the presentation of the visual identity of the Roman Empire, dating from the early 2nd century A.D., during the reign of the emperor Trajan.</p> <p class="pull-quote"> It appears to be part of a manual for the presentation of the visual identity of the Roman Empire</p> <p> Although the unit system used is unclear, it appears that the Roman design administration had a thoroughly worked-out system for the measurement of inscriptional letters, which allowed them to cut inscriptions in matching lettering styles and in consistent sizes throughout the extremely widespread area under Roman rule.</p> </div> <div class="section-margin"> IMPERIAL IDENTITY SYSTEM UNEARTHED</div> </div> <div class="section" id="s-2"> <div class="section-text"> <p> “It was part of a visual identity that shouted ‘Rome!’,” said the Institut’s vice-director, Robespierre Danton, waving his arms enthusiastically at the partially excavated site. “They projected their power and their brand through a coordinated system of graphics that was instantly recognizable anywhere in the Mediterranean world.” The manual’s threadbare pages, according to Danton, specify exactly how the visual system should be implemented, with hints (barely legible) of extreme penalties for misuse of the empire’s intellectual property.</p> <p class="pull-quote"> The manual’s threadbare pages…<br> specify exactly how the visual system should be implemented</p> </div> <div class="section-margin"> ARMA VIRUMQUE CANO</div> </div> <div class="section" id="s-3"> <div class="section-text"> <p> Although the fragments are in a poor state of preservation, one intriguing supplementary find has excited the interest of Dr. Giambattista Farben, a color researcher with the Institut. “This broken tablet, made of baked and polished tufa,” he says, “was found in close proximity to the manual itself. The tablet shows traces of a pattern of varying colors in lead-based paint, and scratches that may be notations to identify the different colors.” Dr. Farben was cautious, but he said that one theory of the colored tablet was that it constituted a color chart for painters who would turn the Romans’ marble walls into a panoply of colors. “It could be the earliest Pantone matching system,” admitted Dr. Farben.</p> <p class="pull-quote"> It could be the earliest Pantone matching system</p> </div> <div class="section-margin"> TANTAE MOLIS ERAT ROMANAM CONDERE GENTEM</div> </div> <div class="section" id="s-4"> <div class="section-text"> <p> Scholars from the University of Northern California dispute the primacy of the Roman identity system. Professor Chien Su-ma of UNC says that he has spent more than twenty years cataloging a collection of inscribed tortoise shells found under a pile of Han-dynasty tax receipts at Dunhuang, on the edge of the Taklamakan Desert, in China’s Gansu province. “The Han Dynasty had a clearly defined visual identity,” claims Prof. Chien, “and I believe these fragments, which were preserved at a major entrepot and outpost of empire, are a key to the system in its earliest form. They certainly predate this Western find by at least a century.”</p> </div> <div class="section-margin"> DCCLIII AB URBIS CONDITA</div> </div> </div> </div> <div id="demodetails"> <p> <b>NOTE</b>: The fonts and layout of this page will not look correct in browsers that do not support Web Open Font Format (WOFF) fonts.</p> </div> </div> </body> </html>