CODEWITHSUNDEEP
javascripthtmlpdf-generationwkhtmltopdfpdfkit
archaeous
archaeous

Reputation: 61

embedding a custom font in pdfkit

I have looked at a few posts on here about pdfkit and embedding fonts but most seem to use the node version or ruby / something that looks vastly different than what I am doing.

I have everything but the fonts working as expected. However when I enable a custom font no text appears. I see placeholders and bullet points for lists but other than that, nothing.

<html>
  <head>    
  <script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
  <script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
  <script type="text/javascript">      
    
    //getting the arraybuffer of the font I need
    var xhr = new XMLHttpRequest;
    xhr.onload = function() {
        console.log("Font IS 1",xhr.response)
    };

    xhr.responseType = 'arraybuffer';
    xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);
    xhr.send();
      
    //wix method that starts when a UI element is called.  In this case a "download" button
    window.onmessage = (event) => {
        if (event.data) {
      
            // create a document and pipe to a blob
            var doc = new PDFDocument();
            var stream = doc.pipe(blobStream());



            doc.font(xhr.response)
            //The standard way of setting a font for embedded
            //doc.font('Helvetica')

              
              doc.fontSize(20)
              doc.text('Стартовая Страница',200,120)
              doc.text('Test',200,220)
              doc.list(['Стартовая Страница'],50,50)
              doc.list(['TestList'],50,400)

              // end and display the document in the iframe to the right
              doc.end();
            stream.on('finish', function() {
                const blob = stream.toBlob('application/pdf')
                const a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);
                a.download = "ShoppingList";
                a.style.position = 'fixed';
                a.target = '_blank';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        });
      
    };


    </script>
  </head>
  
  <body>

  </body>
</html>

I have tried several different methods but most help seems to be suggesting CSS which I don't see how I can use here. Unfortunately I am unable to upload a font to my own filesystem to use as the site where I am building it blocks upload of fonts for some reason. This is why I went with the google fonts as I didn't run into CORS issues.

I directly linked to the woff2 file as getting an arraybuffer using any of the other methods google recommends doesn't seem to work. As a note I will be using both Latin and Cyrillic characters so this might be an issue since they are separate character sets it appears

Here is where I was getting the links from https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap

Also when I try opening the pdf I get this error Cannot extract the embedded font 'BZZZZZ+CormorantGaramond-Regular'. Some characters may not display or print correctly

When I look at the registered fonts in the pdf it appears to show how it shows for other fonts Registered Font

Is there some other way I should be trying to register this font to the document?

Upvotes: 2

Views: 2763

Answers (2)

Steve Bennett
Steve Bennett

Reputation: 126295

This worked for me:

  const myfont = await fetch("fonts/myfont.ttf")
    .then((r) => r.arrayBuffer());

  doc.font(myfont)

Upvotes: 1

Chillz
Chillz

Reputation: 199

It seems that you can't directly embed any of the "woff2" files served by google fonts. You have to find the otf or ttf files that are available in the github repo.

You can find the files you need here: https://github.com/CatharsisFonts/Cormorant/tree/master/1.%20TrueType%20Font%20Files

Just download a file and then copy and paste the download link. So:

xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);

should be:

xhr.open('GET', 'https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/1.%20TrueType%20Font%20Files/Cormorant-Regular.ttf', true);

Upvotes: 3

Related Questions