Custom CSS

Last updated March 23, 2026

The builder’s Styles panel covers common styling needs — colors, spacing, typography, and layout. When you need something the visual controls don’t offer, the CSS editor and external assets let you go further.

The CSS editor

Click the Custom CSS button in the toolbar at the top of the canvas to open the global CSS editor. Write your CSS rules and press Ctrl+Enter (or Cmd+Enter on Mac) to save.

The CSS editor with example styles

CSS written here applies globally to the entire template. This is especially useful for styling HTML blocks — which don’t have visual style controls — and for adding effects the Styles panel doesn’t support.

/* Style an HTML block's content */
.product-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Add a decorative underline to headings */
h2 {
  border-bottom: 2px solid #db2777;
  padding-bottom: 8px;
}
The builder generates Tailwind CSS utility classes for its visual styles. Your custom CSS rules take effect alongside Tailwind utilities. If you need to override a Tailwind-generated style, increase your selector specificity or use !important as a last resort.

Arbitrary styles

The Styles panel has a Custom section at the bottom. This lets you apply arbitrary CSS to individual elements without writing global rules.

The Custom section at the bottom of the Styles panel

Arbitrary styles use Tailwind’s bracket syntax: [property:value]. For example, adding [outline:2px_solid_purple] and [outline-offset:10px] draws a purple outline around that specific element.

This is useful for one-off adjustments — a specific mix-blend-mode, a filter, or any CSS property the visual controls don’t expose.

Custom webfonts

The Text section of the Styles panel includes a font-family selector with access to Google Fonts. For fonts from other providers, use @font-face or @import in the CSS editor:

/* Self-hosted or third-party font */
@font-face {
  font-family: 'Brand Sans';
  src: url('https://your-cdn.example.com/fonts/brand-sans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

.brand-heading {
  font-family: 'Brand Sans', sans-serif;
}
Webfont loading adds a small amount of time to document generation. Stick to one or two font families when possible to keep rendering fast.

External stylesheets

For CSS libraries or frameworks, use the External Assets manager. Click the External Assets button in the toolbar, then add the CDN URL of the stylesheet you want to include.

The External Assets editor with a CSS CDN URL

External stylesheets load before the template renders, so all their classes and styles are available immediately. Common uses include:

  • Icon libraries — Font Awesome, Material Icons, Bootstrap Icons
  • Specialized tools — print-specific stylesheets, CSS-based chart libraries
External assets require an active internet connection during document generation. Make sure your CDN URLs are reliable and publicly accessible. If a URL is unreachable, the styles will not apply.

Difference from Code Templates

In Code Templates, you write CSS in a dedicated CSS tab. The builder separates concerns differently: global styles go in the CSS editor, arbitrary per-element styles go through the Styles panel’s Custom section, and external libraries go through the External Assets manager.

  • Custom JS — global JavaScript, inline scripts in HTML blocks, and external JS libraries

Frequently asked questions

How do I add custom CSS to a PDFMonkey builder template?
Click the Custom CSS button in the builder toolbar to open the global CSS editor. Write your rules and press Ctrl+Enter (Cmd+Enter on Mac) to save. The CSS applies globally to the entire template, including inside HTML blocks.
Can I use custom webfonts in PDFMonkey builder templates?
Yes. The Styles panel includes a Google Fonts selector. For fonts from other providers, use @font-face or @import rules in the CSS editor with a URL to your hosted font files.
How do I add external CSS libraries to a PDFMonkey template?
Use the External Assets manager in the builder toolbar and add the CDN URL of the stylesheet. External stylesheets load before the template renders, so all their classes are immediately available. Common uses include icon libraries like Font Awesome.
How do I apply arbitrary CSS to a single element in the PDFMonkey builder?
Select the element, open the Styles tab, and scroll to the Custom section at the bottom. Enter values using Tailwind’s bracket syntax, such as [outline:2px_solid_purple], to apply one-off CSS properties the visual controls don’t expose.
Navigation