HTML barcode using code128(type b), with use of google fonts

In my job, the manager requested for html page (in php) that will create html barcode(not image, not drawing, without use of TCPDF classes) - and I just can't understand how it's work. I took sample from the interent , tried to run it but there is no barcode shown. this is my example code:

Here is my code:

<html>
 <head>
   <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
   <style>
     .ss {
      font-family: "Libre Barcode 128 Text";
          font-size: 24px;
         }
    </style>
 </head>
    <body>
       <br /><span id="test" class="ss">Ìqms3NÎ</span><br />
    </body>
 </html>;

What I'm doing wrong and how can I solve it?

Create php barcode using code-128 in HTML using google fonts , with no image or drawing

Solution

I don't have an example of PHP using Libre Barcode font, but I have PHP using custom font in the form of a WordPress plug-in, and JS using Libre Barcode Code 128.

The key is that if you use the Libre Barcode Code 128 font, some code has to calculate the checksum.

var buttonGen = document.getElementById("btnGen");
buttonGen.onclick = function () {
  var x = document.getElementById("textIn").value;
  var i, j, intWeight, intLength, intWtProd = 0, arrayData = [], fs;
  var arraySubst = [ "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê" ];

/*
 * Checksum Calculation for Code 128 B
 */
  intLength = x.length;
    arrayData[0] = 104; // Assume Code 128B, Will revise to support A, C and switching.
    intWtProd = 104;
    for (j = 0; j < intLength; j += 1) {
            arrayData[j + 1] = x.charCodeAt(j) - 32; // Have to convert to Code 128 encoding
            intWeight = j + 1; // to generate the checksum
            intWtProd += intWeight * arrayData[j + 1]; // Just a weighted sum
    }
    arrayData[j + 1] = intWtProd % 103; // Modulo 103 on weighted sum
    arrayData[j + 2] = 106; // Code 128 Stop character
  chr = parseInt(arrayData[j + 1], 10); // Gotta convert from character to a number
  if (chr > 94) {
    chrString = arraySubst[chr - 95];
  } else {
    chrString = String.fromCharCode(chr + 32);
  }
  
  // Change the font-size style to match the drop down
  fs = document.getElementsByTagName("option")[document.getElementById("selList").selectedIndex].value;
  document.getElementById("test").style.fontSize = fs  + 'px';
  
  document.getElementById("check").innerHTML =
    'Checksum = ' + chr + ' or character ' + // Make It Visual
    chrString + ', for text = "' + x + '"';
  
  document.getElementById("test").innerHTML =
    'Ì' + // Start Code B
    x + // The originally typed string
    chrString + // The generated checksum
    'Î'; // Stop Code
}

  <head>
    <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
    <style>
      td, th {
        text-align: center;
        padding: 6px;
      }

      .ss {
        font-family: 'Libre Barcode 128 Text', cursive;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    &nbsp;Font Size:&nbsp;
    <select id="selList">
      <option value="24" selected>24px</option>
      <option value="30">30px</option>
      <option value="36">36px</option>
      <option value="42">42px</option>
      <option value="48">48px</option>
      <option value="54">54px</option>
      <option value="60">60px</option>
      <option value="66">66px</option>
      <option value="72">72px</option>
      <option value="78">78px</option>
      <option value="84">84px</option>
      <option value="90">90px</option>
      <option value="96">96px</option>
    </select>&nbsp;

    <input type="text" id="textIn"></input>
    <input type="button" id="btnGen" value="Generate Code 128 Checksum" tabindex=4/>
    <div id="check"></div><br /><span id="test" class="ss">ÌMaking the Web Beautiful!$Î</span><br />
    <p>This is a demonstration of use of the Libre Barcode 128 Font.</p>
    <p>Because the Libre Barcode Code 128 font does not generate checksums, you need this component to produce a scanning barcode.</p>
    <p>To use, just enter the text you want to embed in the barcode and press the generate button. Happy barcoding!</p>
    <p>By the way, Libre Barcode 128 Font uses the following high ASCII / unicode characters to implement the control codes symbols. (This is essentially adding 100 to the value, in other words 'Ã' is U+00C3 (195) to 'Î' is U+00CE (206).)</p>
<table border="3">
    <tr>
    <th>Value</th>
    <th>Encoding</th>
    <th>Subst</th>
  </tr>
<tr><td> 95</td><td>A: US, B: DEL, C: 95</td><td>Ã</td></tr>
<tr><td> 96</td><td>A: FNC 3, B: FNC 3, C: 96</td><td>Ä</td></tr>
<tr><td> 97</td><td>A: FNC 2, B: FNC 2, C: 97</td><td>Å</td></tr>
<tr><td> 98</td><td>A: Shift B, B: Shift A, C: 98</td><td>Æ</td></tr>
<tr><td> 99</td><td>A: Code C, B: Code C, C: 99</td><td>Ç</td></tr>
<tr><td>100</td><td>A: Code B, B: FNC 4, C: Code B</td><td>È</td></tr>
<tr><td>101</td><td>A: FNC 4, B: Code A, C: Code A</td><td>É</td></tr>
<tr><td>102</td><td>A: FNC 1, B: FNC 1, C: FNC 1</td><td>Ê</td></tr>
<tr><td>103</td><td>Begin Code A</td><td>Ë</td></tr>
<tr><td>104</td><td>Begin Code B</td><td>Ì</td></tr>
<tr><td>105</td><td>Begin Code C</td><td>Í</td></tr>
<tr><td>106</td><td>Stop Code</td><td>Î</td></tr></table>
  </body>