WOFF Barcode Web Fonts for JavaScript, CSS & HTML5

  • Easily generate web-based barcodes with WOFF fonts.
  • Web Fonts and JavaScript Encoders are Included with the purchase of a Developer License to any font package.
  • Compatible with many report web viewers and browsers including IE, Firefox, Chrome, Opera & Safari.
  • HTML5, CSS, and JavaScript may be used to enable dynamic barcode generation.
  • Linear 1D and 2D barcode types are supported including Code 128, GS1-128, Code 39, ITF, USPS IMb, UPC, EAN, DataBar, PDF417, Data Matrix, GS1-DataMatrix & QR Code.
  • OCR-A, OCR-B, and MICR are also supported.
  • EOT and SVG barcode font formats are also included.

Order Fonts Test Page

Overview

The Web Open Font Format (WOFF) is a web font format that is compatible with multiple web browsers and web viewers, including the latest versions of IE, Firefox, Chrome, Opera, and Safari. It became a World Wide Web Consortium (W3C) Recommendation in December 2012. With a Developer License purchase, IDAutomation fonts may be used according to section 6 of the IDAutomation Software License Agreement, provided that domain restrictions are enabled for the fonts when possible. 

Code 39 Example (WOFF HTML & CSS Method)

Web fonts are downloaded by the browser and discarded after use, so the fonts cannot be used for anything else. The following steps allow an easy implementation in CSS and HTML:

  1. Upload the fonts to your website in or near the same directory as your CSS files. Most browsers require the fonts to be used solely on the domain they are hosted on.
  2. Define the font in the CSS @font-face declaration with the complete URL to the font file:
    <STYLE TYPE="text/css">
<!-- /* include the idautomation.com Code39 WOFF Font -- */
@font-face { 
font-family: IDAutomationHC39M;	 
src: url(https://www.yourdomain.com/woff-web-fonts/IDAutomationHC39M.woff);
}
-->
</STYLE>
  3. Reference the font where it is to be used with the point size:
    <p style="font-size:16pt ; font-family: IDAutomationHC39M">(WOFF_FONT)</p>
  4. Implement domain restrictions and verify the font appears in the browser.
  5. The barcode generated below is the outcome of the implementation described above.


(WOFF_FONT)


QR Code Example (WOFF HTML5 CSS & JavaScript Method)

The following describes how to use the JavaScript Font Encoder in HTML with CSS to generate a QR Code. The font encoder is required to format the data to the font. The font encoder and web fonts are included with developer licenses of the QR Code Font and Encoder.

  1. Upload the fonts and JavaScript Encoder to your website in or near the same directory as your CSS files. Most browsers require the fonts to be used solely on the domain they are hosted on.
  2. Add the following to load the appropriate JavaScript file:
    <script language="JavaScript" src="IDAutomation_QRCode.js"></script>
  3. Add the barcode font as a font family and provide the source to the font. 
    <style type="text/css">
<!--
@font-face {
  font-family: IDAutomation2D_B1_DEMO;
  src: url(https://www.idautomation.com/fonts/IDAutomation2D_B1_DEMO.woff);
}
</style>
  4. Add a script where the barcode is to appear in the HTML document or text object, which is the file name without the ".js". The 2D font usually requires additional settings for line height and letter spacing to reduce the unwanted white space that may appear within the symbol.
    <p style="font-size: 12pt; line-height: 1; letter-spacing: 1; font-family: IDAutomation2D_B1_DEMO">
<script type="text/javascript">
document.write(IDAutomation_QRCode("DataToEncode"))
</script>
</p>
  5. Modify "DataToEncode" with what is to be encoded in the barcode.
  6. The 2D QR Code below is the outcome of the implementation described above.

    AHEEEHAPGICENPAHEEEHAP
    BNFFFNBPAGFOBPBNFFFNBP
    DIPOFOFFHPFAJFHDAGMLDP
    ENNFFFEPJGDOMPCJIBCNKP
    APBBBPAPHFMDEHNFNLGDKP
    HHHHHHHPHHPHHHPHHPHHHP

To investigate other methods of generating barcodes on the web that do not use fonts, visit the Internet & Web Page Barcode Implementation FAQ.

Compatibility

IDAutomation recommends using only WOFF fonts for modern applications. To enable support of web fonts on legacy systems, other font types such as EOT (embedded OpenType) and SVG are also provided and may be included in HTML/CSS. Generally, EOT fonts work on older versions of IE, and SVG fonts work on older versions of Safari on the iPhone and iPad. The Web Font Testing page attempts to display WOFF, EOT, and SVG barcode fonts separately for testing purposes. IDAutomation also provides a CSS @font-face declaration that includes multiple web fonts with a single reference to the font family.

Related Information