Custom CSS

To customize the styling of the content or for hiding elements in Print/PDF, you can use custom CSS.

Adding Custom CSS

Use a CSS File

Enter the URL to your CSS file in the custom CSS input in the button code page and use the generated button code.

Use printfriendly-css tag

You can add printfriendly-css tag to the page with the CSS enclosed within it along with the button code.

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

Sample Customizations

Note

Scope your CSS roles to #printfriendly and add !important to override the default styles

Customizing the margin of Print/PDF

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

Hide URL

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

Hide Title

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

Use Google Fonts

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

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

Print/PDF in Landscape

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