Web Open Font Format 2 (WOFF2) Barcode Fonts


Web Open Font Format 2 (WOFF2)

The Web Open Font Format (WOFF) is a web font format developed by the World Wide Web (W3C) consortium during 2009 for use in web pages. It enables web designers to use fonts that are not installed on the user's device to build high quality and beautiful web pages. The WOFF format has since been widely adopted and used by millions of websites around the world. With the rise of browsing on mobile devices, demand for fast and efficient loading of web resources, including web fonts, has clearly become important. This has led to the introduction of the Web Open Font Format 2 (WOFF2). The new format improves on the original format by optimizing compression and lowering network bandwidth, while still allowing fast decompression.

Web Open Font Format 2 (WOFF2) Barcode Fonts

ConnectCode Barcode Software and Fonts package has provided barcode web fonts in WOFF format (and also other formats such as ttf and otf) for many years. Using fonts to generate barcodes is well known in the auto-id industry. When a font is printed, it rasters to the resolution of the printer and will not be limited to the DPI (Dots per Inch) of the device screen. Providing barcode fonts in a web font format has enabled many web designers and developers to easily generate high quality barcodes on web pages.

From version 11.3 onwards, ConnectCode Barcode Software and Fonts package also provides barcode fonts in WOFF2 format. The WOFF2 barcode fonts are on average 30% smaller in file size and allows for significant optimizations for fast web page loading. Moreover, a font only needs to be loaded once and can be used to generate multiple barcodes. Thus, the total savings in bandwidth is even more significant for reports that need to generate multiple barcodes on a single page.

The WOFF2 Barcode Fonts are available in the Resource/WOFF2/fonts folder of the ConnectCode Barcode Software and Fonts package, and can be used in all different types of web applications. The Resource/WOFF2 folder contains a reference implementation on the usage of the WOFF2 barcode fonts using vanilla Javascript. For example, in the "javascriptCode128ABarcode.html" file, look for the @font-face tag as shown below: 


  @font-face {
    font-family: CCode128_S3;
    src: url("fonts/ConnectCode128_S3.woff2") format("woff2");		
  }


Supported Browsers

  • Microsoft Edge 42.17134.1.0 (or above)
  • Microsoft EdgeHTML 17.17134 (or above)
  • Microsoft Edge Mobile Browsers (42.0 or above)
  • Google Chrome 65.0.3325.181 (or above)
  • Android Chromium 64.0.3282.137 (or above)
  • Opera 54.0 (or above)
  • macOS Safari 12.0 (or above)
  • iOS Safari 11.3 (or above)
  • Mozilla Firefox Quantum 59.0.2 (or above)
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.

ConnectCode Barcode Software and Fonts package also provides the following web components. All components can be easily customized to use the WOFF2 barcode fonts. By default, all the provided web components use the WOFF barcode fonts for maximum browser compatibility.

  • Angular
  • Javascript
  • jQuery
  • React
  • TypeScript
  • WebAssembly
How to upgrade to WOFF2 barcode fonts?

If you are an existing user of our WOFF barcode fonts, you can simply follow the steps below to upgrade to the WOFF2 barcode fonts.

1. Copy the WOF22 fonts to your fonts folder. The WOFF2 Barcode Fonts are available in the Resource/WOFF2/fonts. If you are using any of our web components, you can copy the WOFF2 fonts to the following folders:

  • Angular
    <ConnectCode>/Resource/Angular/src/<barcode>/fonts
  • Javascript
    <ConnectCode>/Resource/webfonts/HTML5/javascript/<barcode>/fonts
  • jQuery
    <ConnectCode>/Resource/webfonts/HTML5/jQuery/<barcode>/fonts
  • React
    <ConnectCode>/Resource/React/fonts
  • TypeScript
    <ConnectCode>/Resource/TypeScript/VS2013-2017/ConnectCodeTypeScriptBarcode/barcodefonts
  • WebAssembly
    <ConnectCode>/Resource/WebAssembly/<barcode>/fonts
2. Change the @font-face tag in the CSS.

In your existing web page, you may have the following tag in your CSS: 


  @font-face {
    font-family: CCodeXX_SX;
    src: url("fonts/ConnectCodeXX_SX.woff") format("woff");		
  }


Simply change the @font-face tag to point to the WOFF2 barcode fonts. 


  @font-face {
    font-family: CCodeXX_SX;
    src: url("fonts/ConnectCodeXX_SX.woff2") format("woff2");		
  }


For example, for a Code 128 barcode, you can change the following 


  @font-face {
    font-family: CCode128_S3;
    src: url("fonts/ConnectCode128_S3.woff") format("woff");		
  }


to 


  @font-face {
    font-family: CCode128_S3;
    src: url("fonts/ConnectCode128_S3.woff2") format("woff2");		
  }


The following list the locations of the CSS file for the various web components.

  • Angular
    <ConnectCode>/Resource/Angular/src/<barcode>/<xx-barcode.component>.css
  • Javascript
    <ConnectCode>/Resource/webfonts/HTML5/javascript/<barcode>/javascript<barcode>.html
  • jQuery
    <ConnectCode>/Resource/webfonts/HTML5/jQuery<barcode>.html
  • React
    <ConnectCode>/Resource/React/.css
  • TypeScript
    <ConnectCode>/Resource/TypeScript/VS2013-2017/ConnectCodeTypeScriptBarcode/<barcode>.html
  • WebAssembly
    <ConnectCode>/Resource/WebAssembly/<barcode>/index.html