Custom CSS

Anything the settings do not cover, CSS will. Margins, fonts, page size, hiding elements, and matching the printout to your brand.

Where to Put It

Two ways, doing the same job.

A hosted file. Put its URL in the custom CSS field in the builder, or in the plugin's settings. Best when one stylesheet serves several sites. It has to be reachable without signing in.

A tag on the page. Drop a <printfriendly-css> tag next to the button code with the CSS inside. Best for one site, and easier to change.

On the page

<printfriendly-css style="display: none;">
  h4 {
    font-size: 24px !important;
  }
</printfriendly-css>

Scope your rules, and use !important

Our own rules are scoped to an id, like #printfriendly a, which beats a plain tag or class selector regardless of which loads last. Scope every rule to the wrapper and mark it !important. This is far and away the most common reason custom CSS appears to do nothing.

Two wrappers exist, because the preview and the PDF are built differently. The preview and the free PDF put your content in #pf-print-area; the Pro PDF puts it in #printfriendly. Your CSS is applied to all of them, so a rule that names only one wrapper takes effect on only some of them. List both when you want the rule everywhere:

#pf-print-area .newsletter-signup,
#printfriendly .newsletter-signup {
  display: none !important;
}

Recipes

The five that come up most.

Change the Page Margins

@media print {
  @page {
    margin: 5mm !important;
  }
}

Hide the Source URL

#pf-print-area #pf-src,
#printfriendly #pf-src {
  display: none !important;
}

Hide the Title

#pf-print-area #pf-title,
#printfriendly #pf-title {
  display: none !important;
}

Use a Google Font

/* Use the Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

#pf-print-area,
#printfriendly {
  font-family: 'Inter', sans-serif !important;
}

Print Landscape

@media print {
  @page {
    size: landscape !important;
  }
}

Common Questions

My custom CSS is not doing anything#

Nearly always scope or precedence. Every rule needs to carry !important and sit under the wrapper, as in the recipes above.

If it works in the PDF but not in the preview, or the other way around, it is the wrapper: the preview and the free PDF use #pf-print-area, and the Pro PDF uses #printfriendly. Name both.

If it still does nothing, open your CSS file's URL in a private window. If it does not load there, it does not load for us.

Can I stop particular parts of my page from printing?#

You can hide them with CSS, scoped as above:

#pf-print-area .related-posts,
#pf-print-area .newsletter-signup,
#printfriendly .related-posts,
#printfriendly .newsletter-signup {
  display: none !important;
}

For anything structural, the print-no class is better: it excludes the element outright rather than printing it invisibly. See choosing what gets printed.

It keeps choosing Letter and I want A4#

There is a paper size choice in the PDF dialog itself. Your reader picks Letter or A4 there and the choice is remembered in their browser.

The starting value comes from where the reader appears to be: Letter for the United States, Canada, Mexico, most of Central America, Puerto Rico, Chile, Colombia and the Philippines, A4 everywhere else. A VPN or a trip abroad flips it, which is usually what happened when it changes for someone who changed nothing.

For printing rather than PDFs, paper size belongs to your reader's own print dialog and we cannot set it for them. The @page recipe above states a preference; the dialog has the last word.

My font comes out as Times New Roman in the PDF#

The PDF is built on our servers, which do not have your site's font installed, so it falls back. Your own machine has the font, which is why the preview looks right and the download does not.

Point at a webfont we can fetch, using the Google font recipe above. Any font served over the open web works; one hosted behind a login does not.