Display Code128 In a Web page using font (not image nor javascript)

Question

I need to display some Code 128 codes in one html page, in my scenario i would like to not generate images or using javascript to build the barcode. The user edit html (template) through a program, then the HTML is converted to PDF and sended to a printer, but images cause some issue to the converter so i try to avoid them, javascript is not supported.

I have downloaded Code 128 font from here : http://www.dafont.com/it/code-128.font and i use it as follow :

<font face="Code 128">code</font>

but still have normal text (not a code 128 barcode).

Any suggestione on how to use font face to display an isntalled Code 128 font ?

Answer 1

The font tag is really old and should not be used. It's officially not supported at all in HTML5. It's better to use the face from CSS, but you have to use the right name. Also, the font would have to be installed on the client PC.

Maybe better: you can also declare a font face in CSS, so the font file is downloaded from your server, since the barcode font is not commonly available.

You can define a font in CSS using the @font-face rule. You can then use this face in your CSS. You will have to have the font files in different formats. For common use, woff and woff2 will do. You can convert the downloaded ttf file to woff using any of the online font converters. Googling for 'convert ttf to woff' will give you a dozen.

@font-face {
  font-family: 'Code128';
  src:  url('code128.woff2') format('woff2'),
        url('code128.woff') format('woff');
}

After that, you can use it in CSS like this:

.barcode {
  /* Use the name of the face that is installed, or the one you defined above */
  font-family: 'Code128'; 
}

You can then apply the font to any element by using the class name:

<span class="barcode">code</span>

There is a good tutorial with much more details and better browser fallbacks to be found on CSSTricks.com.