footerTemplate and headerTemplate don't use body styles

Tell us about your environment:

Puppeteer version: 1.0.0 Platform / OS version: Linux Mint 18.3 Node.js version: 8.9.4

What steps will reproduce the problem?

I have a piece of code i use to generate pdf reports from html documents:

  const page = await browser.newPage();
  await page.goto(file, { waitUntil: "networkidle0", timeout: 100000 });
  const default_options = {
    format: "A4",
    printBackground: true
  };
  const filename = `file-${uuid()}.pdf`;
  const final_options = Object.assign({}, default_options, { path: filename }, options);
  console.log(final_options);
  await page.pdf(final_options);
  await page.close();

file is a link to a local html file. In this file head, I load specific fonts that I need for the document. Inside of the options , I pass the templates for headers and footers:

options: {
    headerTemplate: "<p></p>", 
    footerTemplate: "<div class=\"footer\" style=\"font-size: 10px;color: #999; margin: 15px 0;clear:both; position: relative; top: 20px;font-family:my-font\"><p>Footer text</p></div>",
    displayHeaderFooter: true, 
    margin: { 
      top: "100px", 
      bottom: "200px"
    }
  }

What is the expected result?

I would expect the footer to use the font loaded in the html body.

What happens instead?

The footer is looking into my system for the first font that could correspond the name provided and put this one instead. If the font is not installed on the system, it is using a default one.

[rclai]

I also noticed that if you stick a style tag in your header/footer templates, the CSS doesn’t all work right. Font sizes are different, custom font family is not changeable it seems, etc, it’s weird.

[TylerJAllen]

Is it possible to use custom font family in footer template? I’ve tried adding <style> tags in the string and classes with styles in a styles.css file but nothing seems to work.