Using Barcode Fonts

[rsnell]

I was wondering if there's a simple way to be able to use barcode fonts (e.g. Libre Barcode 128) in a Valence widget. I want to be able to display an order number as a barcode in one of my apps so it can be scanned.

[Johnny Major]

From behaviors on startup, add an execute script that will load the fonts and add a new CSS for styling your value into a barcode.

Startup > Execute Script

// get the barcode font via google
//
const link = document.createElement('link');
link.href = 'https://fonts.googleapis.com/css?family=Libre+Barcode+128&display=swap';
link.rel = 'stylesheet';
document.head.appendChild(link);

// add the barcode css
//
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `.libre-barcode-128-regular {
  font-family: "Libre Barcode 128", system-ui;
  font-weight: 400;
  font-style: normal;
}`;
document.head.appendChild(style);

success();

Then for example in a grid custom formatter return the value with the class of 'libre-barcode-128-regular':

return `<div class="libre-barcode-128-regular">${v}</div>`;

[Johnny Major]

Did this work for you?