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

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