Barcode Web Fonts

ConnectCode Barcode Web Fonts is a solution that allows users to create barcodes on the web using fonts instead of images. It is based on ConnectCode’s True Type barcode font engine that has been proven to meet strict industry requirements. The solution employs the latest web technologies such as the Web Open Fonts Format and complies with the World Wide Web Consortium (W3C) standards. It has passed numerous independent audits, barcode verification tests and is used by many Fortune 500 companies.

Using a barcode web font is efficient as it only requires a single font to be downloaded to the browser and is able to generate multiple barcodes thereafter. Barcode fonts also raster to the output device and are not limited to DPI (Dots per Inch) of the computer screen. The versatility of a barcode font also makes it a popular solution for integrating with existing enterprise projects as it neither depends heavily on the programming environment nor requires intensive graphics operations. Instead, a slight manipulation of existing text is usually sufficient to produce robust and scannable barcodes.

@font-face Barcode

The Barcode Web Fonts solution provided by ConnectCode uses the Cascading Style Sheets (CSS) @font-face feature. @font-face allows authors to specify online or remote server fonts to display text on their web pages. This eliminates the need to depend on the fonts users have installed on their computers.

A barcode font is basically a specially designed font that allows users to specify and generate barcodes on normal text characters. A barcode web font builds on top of the barcode font and allows users to download the fonts to their local client machines. By tapping on the @font-face capabilities, users can now load their favourite HTML editors and create different types of barcodes that will work on different modern browsers.

Web Open Font Format (WOFF)

Web Open Font Format (WOFF) is an optimized font format recommended by World Wide Web Consortium (W3C) for use in web pages. It is a font format that uses compression on Open Type or True Type fonts to achieve file size reduction so that it can be efficiently distributed over the web. Over the years, WOFF has received the backing of many type foundries and browsers, and is now considered the defacto font format on the web.

ConnectCode provides barcode fonts in WOFF format for use on the web and on the cloud. All the fonts are tested vigorously to display on different desktop and mobile browsers. The web pages with the barcodes are also printed to ensure that they meet the all the requirements of the different industry specifications. Additionally, ConnectCode also provides barcode fonts in Embedded Open Type (EOT), and Open Type (OTF) format to ensure that our solution works on legacy browsers that have yet to fully support WOFF.

Using Javascript to generate the barcode characters

To create a barcode that adheres to the industry specifications typically requires the validation of the input data, transformation of the data to barcode characters and the creation of check digit characters. Besides providing the web fonts, the ConnectCode Barcode Web Fonts solution also provides Javascript and jQuery programs to carry out the above-mentioned processes.

Users can simply copy and upload the entire subdirectory of a specific barcode web font from the ConnectCode solution and have barcodes created on their websites immediately. The "Resource/webfonts/javascript/<barcode name>" directory contains the web fonts, HTML web page and Javascript programs for the different barcodes shown below. Click on the links below to see a sample of the barcode generated. Note : The registered version contains the full set of fonts of different sizes in the subdirectory. Users can remove the fonts that are not in use to reduce the number of files to upload.

Using jQuery to generate the barcode characters

Besides providing Javascript to generate the barcodes, ConnectCode also provides a jQuery library. The jQuery library bundled with Connectcode is jQuery 1.4.2. However, any versions of jQuery will work with the Barcode Web Fonts solution.

Users can simply copy and upload the entire subdirectory of a specific barcode web font from the ConnectCode solution and have barcodes created on their websites immediately. The "Resource/webfonts/jQuery/<barcode name>" directory contains the web fonts, HTML web page and jQuery programs for the different barcodes shown below. Click on the links below to see a sample of the barcode generated. Note : The registered version contains the full set of fonts of different sizes in the subdirectory. Users can remove the fonts that are not in use to reduce the number of files to upload.

Supported Browsers and Platforms

ConnectCode Certified + Current and newer versions

Please note that you may have noticed that our web fonts solution works on many more browsers. However, we currently only provide technical support for the above-mentioned browsers.

Looking inside the HTML web page

ConnectCode Barcode Web Fonts internally uses the @font-face CSS font selector as shown in the HTML headers below. The selector uses Embedded OpenType (eot), Web Open Font Format (woff) or Open Type fonts (otf) depending on the browser.


<head>
<STYLE TYPE="text/css" media="screen,print">
  @font-face {
    font-family: CCodeCodabar_S3_Trial;
    src: url("fonts/ConnectCodeCodabar_S3_Trial.eot");
    src: local("CCodeCodabar_S3_Trial"), url("fonts/ConnectCodeCodabar_S3_Trial.otf") format("opentype"), url("fonts/ConnectCodeCodabar_S3_Trial.woff") format("woff");
  }

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

</STYLE>
</head>
</body>

<div class=barcode>A123456A</div>
</body>



The script below shows how to use Javascript to validate the data and transform the data into barcode characters.



<script type="text/javascript">

  function get_object(id) {
   var object = null;
   if (document.layers) {
    object = document.layers[id];
   } else if (document.all) {
    object = document.all[id];
   } else if (document.getElementById) {
    object = document.getElementById(id);
   }
   return object;
  }

get_object("barcode").innerHTML=ConnectCode_Encode_CodeCodabar(get_object("barcode").innerHTML);

</script>



The script below shows how to use jQuery to validate the data and transform the data into barcode characters.


<script type="text/javascript">

(document).ready(function() {

	jQuery('.barcode').Encode_Codabar();   

});
</script>

Notes on migrating to the latest version of the Barcode Web Fonts

ConnectCode strongly recommends users to migrate from the previous versions of Barcode Web Fonts to this latest version. This latest version uses Embedded Open Type (eot), Web Open Font Format (woff) and Open Type (otf) barcode fonts. This change enables the generation of barcodes using fonts on a wider variety of browsers in different operating systems such as Windows, Mac OS X, Android, Windows Phone, Firefox OS and iOS.

For a list of supported and certified browsers, please refer to the "Supported Browsers and Platforms" section.

How do I migrate from the previous version?

The migration is a simple two-step process as shown below:

1. Copy the Web Open Font Format fonts (*.woff) in the fonts subdirectory to your deployment directory. For example, if you are using the Codabar barcode, you will need to copy the Web Open Font Format font (*.woff) files from the following directory to your deployment directory:

<ConnectCode Barcode Fonts directory>\Resource\webfonts\javascript\codabar\fonts

2. The second step is to modify the web page to support the WOFF fonts as illustrated below:

From

@font-face {
font-family: CCodeCodabar_S3;
src: url("fonts/ConnectCodeCodabar_S3.eot");
src: local("CCodeCodabar_S3"), url("fonts/ConnectCodeCodabar_S3.otf") format("opentype");
}

to

@font-face {
font-family: CCodeCodabar_S3;
src: url("fonts/ConnectCodeCodabar_S3.eot");
src: local("CCodeCodabar_S3"), url("fonts/ConnectCodeCodabar_S3.otf") format("opentype"), url("fonts/ConnectCodeCodabar_S3.woff") format("woff");
}

Customizing the barcodes in the HTML page

This section describes the properties and parameters that can be customized for the different barcodes in the HTML page. In general, the parameters are the Font Size, Font Name, Check Digit (0 for Off and 1 for On), Human Readable Text(0 for Off and 1 for On), Linkage(0 for Off and 1 for On), ITF Rectangle (0 for Off and 1 for On) and GS1Compliance (0 for Legacy and 1 for Strict).

The Barcode Web Fonts solution comes with seven different heights provided in seven different fonts with different names. The barcode names are appended with characters like "S1", "S2", etc., each represents a different height.

If you are using the trial version, the font name will have the word "_Trial" appended to it.


Codabar Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Code39 Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Code39 Ascii Barcode

Fonts with varying height supported :

Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Code93 Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Code128 A Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Code128 B Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Code128 C Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Code128 Auto Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

UCCEAN Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

I2of5 Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Industrial 2of5 Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

ITF14 Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

Modified Plessy Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

POSTNET Barcode

Fonts supported (Fixed Font Size 12):
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

EAN13 Barcode

Fonts with varying height supported :
Fonts with embedded Human Readable Text :
Fonts with Human Text at the Top of the barcode (typically only used by EXT2/EXT5. For this barcode, only 3 font sizes are supported) :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

EAN8 Barcode

Fonts with varying height supported :
Fonts with embedded Human Readable Text :
Fonts with Human Text at the Top of the barcode (typically only used by EXT2/EXT5. For this barcode, only 3 font sizes are supported) :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

UPCA Barcode

Fonts with varying height supported :
Fonts with embedded Human Readable Text :
Fonts with Human Text at the Top of the barcode (typically only used by EXT2/EXT5. For this barcode, only 3 font sizes are supported) :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

UPCE Barcode

Fonts with varying height supported :
Fonts with embedded Human Readable Text :
Fonts with Human Text at the Top of the barcode (typically only used by EXT2/EXT5. For this barcode, only 3 font sizes are supported) :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

EXT2 Barcode

Fonts with varying height supported :
Fonts with embedded Human Readable Text :
Fonts with Human Text at the Top of the barcode (typically only used by EXT2/EXT5. For this barcode, only 3 font sizes are supported) :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

EXT5 Barcode

Fonts with varying height supported :
Fonts with embedded Human Readable Text :
Fonts with Human Text at the Top of the barcode (typically only used by EXT2/EXT5. For this barcode, only 3 font sizes are supported) :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :

GS1 Databar 14 Barcode

Fonts with varying height supported :
Javascript Function :
After calling the encode function above, the Get_HRText() function can be called to retrieve the Human Readable Text of a barcode.

jQuery Function :