i need to create a PDF Buffer and save this to the database. I am passing the plete DOM to puppeteer and most of it works just fine. When i open the created PDF Buffer, bootstrap styles are applied and i get a beautifull PDF.

However, font-awesome icons will not show up. i have only two CSS files: framework.css (created with SASS and containing custom styles, bootstrap styles and font-awesome) and print-media (contains print media css to hide or show stuff like the navigation). Here is my Code to create the PDF Buffer:

const browser = await puppeteer.launch({
      args: ['--disable-dev-shm-usage', '--no-sandbox', '--headless', '--disable-gpu'],
      executablePath: pathToChrome}
);
const page = await browser.newPage();
const content = await page.setContent(pdfOptions.dom);
const addCss7 = await page.addStyleTag({path: appPath +  '/public/css/framework.css'});
const addCss8 = await page.addStyleTag({path: appPath +  '/public/css/print-media.css'});
const buffer = await page.pdf();
F.log(buffer);

Inside the css folder i created a fonts folder containing the font-awesome fonts and @font-face refers to this path:

@font-face {
  font-family: "FontAwesome";
  src: url("./fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("./fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("./fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("./fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Do i have to tell puppeteer that there are fonts it should use specifically or did i miss something else?

Thanks in advance, Pascal

Edit: Tried to use absolute path, but this will wont work either. If i do this, even the Website will not contain the fonts.

@font-face {
    font-family: "FontAwesome";
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?v=4.7.0");
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff?v=4.7.0") format("woff"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
  }

i need to create a PDF Buffer and save this to the database. I am passing the plete DOM to puppeteer and most of it works just fine. When i open the created PDF Buffer, bootstrap styles are applied and i get a beautifull PDF.

However, font-awesome icons will not show up. i have only two CSS files: framework.css (created with SASS and containing custom styles, bootstrap styles and font-awesome) and print-media (contains print media css to hide or show stuff like the navigation). Here is my Code to create the PDF Buffer:

const browser = await puppeteer.launch({
      args: ['--disable-dev-shm-usage', '--no-sandbox', '--headless', '--disable-gpu'],
      executablePath: pathToChrome}
);
const page = await browser.newPage();
const content = await page.setContent(pdfOptions.dom);
const addCss7 = await page.addStyleTag({path: appPath +  '/public/css/framework.css'});
const addCss8 = await page.addStyleTag({path: appPath +  '/public/css/print-media.css'});
const buffer = await page.pdf();
F.log(buffer);

Inside the css folder i created a fonts folder containing the font-awesome fonts and @font-face refers to this path:

@font-face {
  font-family: "FontAwesome";
  src: url("./fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("./fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("./fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("./fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Do i have to tell puppeteer that there are fonts it should use specifically or did i miss something else?

Thanks in advance, Pascal

Edit: Tried to use absolute path, but this will wont work either. If i do this, even the Website will not contain the fonts.

@font-face {
    font-family: "FontAwesome";
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?v=4.7.0");
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff?v=4.7.0") format("woff"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
  }

• javascript
• pdf
• fonts
• puppeteer
• webautomation

• Did you try with headless false to see if the fonts are being applied in the page? – hardkoded Commented Feb 22, 2019 at 12:01
• @hardkoded i just tried it. The icons are not loaded there as well. – 404_Name_Not_Found Commented Feb 22, 2019 at 13:23
• I bet that the problem is in "./fonts/fontawesome-webfont.eot?v=4.7.0". You have to think that If you call newPage and setContent, your root will be "about:blank" so it won't be able to find a "./fonts/" – hardkoded Commented Feb 22, 2019 at 14:23
• yeah i think so as well, but how to tell chromium where to look?. – 404_Name_Not_Found Commented Feb 22, 2019 at 15:00
• maybe you could publish that somewhere and target an absolute URL – hardkoded Commented Feb 22, 2019 at 15:20

3 Answers 3

As I mented on the question. The problem is the about:blank location. What I remend is doing the following:

• Create a web folder.
• Put there your fonts folder.
• Create there an empty.html file. Like this one https://github./GoogleChrome/puppeteer/blob/master/test/assets/empty.html
• After doing const page = await browser.newPage(); call await page.goto('file://your path/expressed/as/url/web/empty.html');
• Now your relative path "./fonts/, should work

I solved this issue by copying the specific fonts to my local filesystem fonts folder. On Mac OS I had to copy all Font Awesome fonts to ~/Library/Fonts.

I have embedded the font awesome css to the HTML header. It worked for me.

<link href='https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>.

I am feeding HTML content using setContent method but I can see icons on the HTML before including the above link, and I don't like the idea to rely on external css link.