Woff2 font with blank pdf page

[schengit]

try to use woff2 font and get blank pdf page, no error found

[khludenevav]

Error on loading woff2 through google font api - "Uncaught RangeError: Index out of range"
It's very important to support woff2 to us.
Reproduction:
Error on https://pdfkit.org/demo/browser.html
Try insert next code and text dissapears
woffUrl works. woffUrl - not

// create a document and pipe to a blob
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());

// urls from https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,bolditalic
// latin normal section
var woff2Url = 'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2';
var woffUrl = 'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxM.woff';
var url = woff2Url;

const xhr = new XMLHttpRequest();
xhr.onload = (_e) => {
const fontSource = xhr.response;
if (xhr.status >= 400 || !fontSource) {
console.log('err');
}
else
afterLoading(fontSource);
};
xhr.onerror = () => notLoaded();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.send();

function afterLoading(fontSource) {
doc.registerFont('Roboto', fontSource);
// draw some text
doc.font('Roboto').fontSize(25).text('Here is some vector graphics...', 100, 80);

// some vector graphics
doc
.save()
.moveTo(100, 150)
.lineTo(100, 250)
.lineTo(200, 250)
.fill('#FF3300');

doc.circle(280, 200, 50).fill('#6600FF');

// an SVG path
doc
.scale(0.6)
.translate(470, 130)
.path('M 250,75 L 323,301 131,161 369,161 177,301 z')
.fill('red', 'even-odd')
.restore();

// and some justified text wrapped into columns
doc
.text('And here is some wrapped text...', 100, 300)
.font('Roboto', 13)
.moveDown()
.text(lorem, {
width: 412,
align: 'justify',
indent: 30,
columns: 2,
height: 300,
ellipsis: true
});

// end and display the document in the iframe to the right
doc.end();
stream.on('finish', function() {
iframe.src = stream.toBlobURL('application/pdf');
});
}

[filippomuscolino]

We're also unable to make it work with WOFF2 fonts from Google Fonts, but in documentation WOFF2 is mentioned.
Any update on this?

[herrstrietzel]

In fact you can get it running with the help of fontello's wawoff2 web assembly build.

Basically you first load the font file as usual creating an ArrayBuffer object.
Then you "unpack" the woff2 data

  let fontUrl="https://fonts.gstatic.com/s/cormorant/v24/H4c2BXOCl9bbnla_nHIA47NMUjsNbCVrFhFTQ7Fg7A2uwYs.woff2";
  const font = await fetch(fontUrl);
  let buffer = await font.arrayBuffer();  

  // convert to trutype
  buffer = Uint8Array.from(Module.decompress(buffer)).buffer;  

 // register font
  doc.registerFont("CustomFont", buffer);
  doc.font("CustomFont");

I've explained it in more details in this stackoverflow post "embedding a custom woff2 font in pdfkit".

In short: while you can patch this missing feature you should prefer ttf as you might miss language support due to the subset splitting of google fonts. Also, woff2 conversion is quite complex so it will impact your app's performance.
All in all: better stick with natively supported truetype!

However, I highly recommend the maintainers of pdfkit to add some clarification in the readme as it currently claims to support woff2 out-of-the-box. While this might be true for node.js usage it doesn't apply to the browser build probably due to missing Brotli decmpression in this build.

You may also take inspiration from the opentype.js project which simply added a section in the readme how to patch missing woff2 support (also deploying wawoff2)