TechnoRiver Barcode Fonts for the Web (WOFF)

TechnoRiver web fonts are specially designed for HTML and web applications. The fonts are included as a component of TechnoRiver Barcode Font and are given the extension WOFF (Web Open Font Format).

A user who has purchased the Barcode Font product may embed the web fonts and encoding javascripts in a HTML to produce dynamic web barcodes.

Details of usage are given below.

The following examples show the different barcodes in action.

Usage

To add barcde to a HTML web page or web application, do the steps below

1. Insert <div> tags with the class names "barcodeVal" and "humanReadable"" anywhere in the <Body> of your HTML and enclose the data of the barcode within these tags. For example

<div class="barcodeVal">1234567890</div>
<div class="humanReadable"></div>

The value 1234567890 is the data of the barcode we will like to encode.

2. Include the javascript files for barcode generation into your HTML. These files will convert the data within the <div class="barcodeVal"> tags into a form that are appropriate for barcode display.

For example, to convert the value 1234567890 to Code128C , you will need to include barcode.js, code128c.js and app-code128.js

<script src="barcode.js""></script>
<script src="code128c.js"></script>
<script src="app-code128c.js"></script>

3. Add the barcode fonts to the CSS of your HTML file with the @font-face declaration. TechnoRiver web fonts are shipped with the eot (Embedded OpenType), woff (Web Open Font Format) and otf (OpenType) formats. For maximum compatibility with most browsers, you may want to embed all of them in your web page.

Example :

The web font for Code 128C is named WebCode128H3. The H3 represents the height of the font, the higher the number, the taller the font will be.

In the @font-face declaration, define the font-family : WebCode128 with the source fonts

  • WebCode128H3.eot
  • WebCode128H3.otf
  • WebCode128H3.woff

and assign WebCode128 to the content within <div class="barcodeVal">


<style type="text/css" media="screen,print">
@font-face {
  font-family: WebCode128;
  src: url("WebCode128H3.eot");
  src: url("WebCode128H3.otf") format("opentype"), url("WebCode128H3.woff") format("woff");
}

div.barcodeVal {
  font-weight: normal;
  font-style: normal;
  line-height: normal;
  font-family: 'WebCode128', sans-serif;
  font-size: 32px;
}

/* required */
div.barcodeVal {
  white-space: pre;
}
</style>

4. To view the outcome of our example implementation, click Code128C. The HTML source for all the above steps can be viewed here : code128c.htm