Search code examples
htmlcssgoogle-apps-scriptpdfbase64

How to use custom font during html to pdf conversion?


I am trying to make a PDF generator based on a html files using Google Apps Script. Unfortunately I am not able to apply custom font for this. I came up with the idea to load the font in base64 format, but it is not working for me. What am I missing?

I have tried to use @font-face with google fonts, but it seems that it is not fetched before conversion (works fine when getting doGet(e) from deployed script).

Here is the code:

Function:

function htmlToPdf() {
  var fileIdOfFontFile = "1xXWmKZ2wRzWq_4DWfeIK67QKFVkF_nVu";
  var fontBlob = DriveApp.getFileById(fileIdOfFontFile).getBlob();

  var htmlTemplate = HtmlService.createTemplateFromFile("site");
  htmlTemplate.fontData = fontBlob.getContentType() + ';base64,' + Utilities.base64Encode(fontBlob.getBytes());

  var pdf_html = htmlTemplate.evaluate().getContent();

  var blob = Utilities.newBlob(pdf_html, MimeType.HTML).getAs(MimeType.PDF);
  DriveApp.createFile(blob);
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <style>
    @font-face {
      font-family: "Gloria Hallelujah";
      src: url(<?= fontData ?>);
    }
    * {
      font-family: "Gloria Hallelujah";
    }
  </style>

  <body>
    <p>test</p>
  </body>
</html>

EDIT: Solution was to change html as follow:

    @font-face {
      font-family: "Gloria Hallelujah";
      src: url(<?= fontData ?>);
    }

to

    @font-face {
      font-family: "Gloria Hallelujah";
      src: url("data:<?= fontData ?>");
    }

It was interesting for me that passing data: as a string part did not worked the same way. It might have been my mistake, but i left this with data: left in html file.


Solution

  • The solution was to change

      @font-face {
          font-family: "Gloria Hallelujah";
          src: url(<?= fontData ?>);
        }
    

    to

        @font-face {
          font-family: "Gloria Hallelujah";
          src: url("data:<?= fontData ?>");
        }