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.
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 ?>");
}