Barcode Web Fonts

Barcode Web Fonts (part of the ConnectCode Barcode Fonts package) solution provides the full solution to help users create barcodes on their webpages easily and quickly. The web fonts are downloaded to the users client machines automatically and different types of barcodes (that adhere strictly to the industry specifications) are generated using Javascript or jQuery.



The Barcode Web Fonts uses a CSS @font-face selector to generate the barcodes.

Why Barcode Web Fonts?

ConnectCode Barcode Web Fonts is based on the True Type barcode font engine that has been proven in many fortune 500 companies. The font engine has passed numerous audits and barcode verification tests. The Barcode Web Fonts combines the barcode fonts engine with the latest web technologies that complies with the World Wide Web Consortium (W3C) standards. This allows users to create barcodes in the web using fonts instead of images.

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.

Generating the Barcodes

Customizing the Barcodes

ConnectCode Barcode Web Fonts internally uses the @font-face CSS font selector as shown in the HTML headers below. In Internet Explorer, the selector uses Embedded OpenType (eot) files while on other browsers it uses Open Type fonts (otf) and Web Open Font Format fonts (woff).

Complete details on customizing the barcode web fonts. 


<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>


Supported Browsers


ConnectCode Certified

  • Internet Explorer 8 (Windows)
  • Internet Explorer 9 (Windows)
  • Internet Explorer 10 (Windows)
  • Internet Explorer 11 (Windows)
  • Microsoft Edge+ (Both Desktop and Mobile)
  • Mozilla Firefox 22+ (Windows)
  • Opera 11+ (Windows)
  • Google Chrome 16+ (Windows)
  • Google Chrome 16+ (Mac OS X)
  • Safari 5.1+ (Mac OS X)
  • iOS 5.0+ Mobile Browser (iOS)
  • Windows Phone OS 8.0+ Mobile Browser (WP)
  • Android 3.1+ (Honeycomb) Mobile Browser (Android API Level 12+)
  • Mozilla Firefox Phone OS 1.0+
+ 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.

Notes on migrating to the latest version of the 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 instead of True Type fonts on a web page. 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 and iOS.

For a list of supported and certified browsers, please refer to the "Supported Browsers and Platforms" section. The True Type web fonts from previous versions are still supported.

How do I migrate from the Open Type barcode web fonts to the Web Open Font Format barcode web fonts?

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 Web Open Font Format 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");
}