What CSS works in pdfrender

Which CSS pdfrender supports for PDFs: page size, margin boxes, page counters, page breaks, fonts, flexbox and grid. Items tested on pdfrender are marked.

Last updated

Engine WeasyPrint 70
Installed fonts DejaVu Sans, DejaVu Serif and DejaVu Sans Mono

pdfrender lays out pages with WeasyPrint 70, which supports print CSS: @page, margin boxes, page counters, page breaks and repeating table headers. It runs no JavaScript and ignores width media queries, so Tailwind breakpoints do not apply.

"Tested" means the CSS in that row was rendered on pdfrender on Sep 24, 2026, and the PDF was checked.

Feature In pdfrender Tested Source
@page size and margin (A4, letter, landscape, mm) Works Yes docs
Named pages (page: wide with @page wide) Works Yes docs
@page :first, :left, :right, :blank Works :first docs
@page :nth(3), :nth(1 of chapter) Works :nth(1 of chapter) docs
Margin boxes (@top-center, @bottom-right and the others) Works Yes docs
"Page X of Y" with counter(page) and counter(pages) Works Yes docs
Page counter reset per chapter Only with @page :nth(1 of chapter) { counter-reset: page 1 }; counter(pages) stays the document total Yes issue #93
Chapter title in a margin box (string-set, string()) Works Yes docs
Page breaks (break-before, break-after, break-inside), orphans, widows Works for pages break-before docs
<thead> repeated after a page break Works Yes docs
@font-face with a data: URI Works, the font is embedded Yes (WOFF2) docs
Installed fonts DejaVu Sans, Serif and Sans Mono; default is DejaVu Serif; other names such as Helvetica fall back to DejaVu Sans Yes docs
Flexbox Simple layouts only One row docs
Grid Simple layouts; no subgrid, auto-fill or auto-fit Two columns docs
Inline SVG Works Yes docs
@media print Applies Yes issue #494
Width media queries (min-width, width >=) Ignored, the whole @media rule is dropped Yes issue #494
HTML attributes bgcolor, border, align Ignored; use CSS Yes docs
JavaScript Does not run Yes docs
External URLs (http(s), file, ftp, @import) Rejected with status 400; relative URLs are dropped Yes images and fonts
Right-to-left text (direction: rtl, the dir attribute) Works, including Arabic letter joining, lists and table columns; DejaVu Sans covers Hebrew and Arabic Hebrew and Arabic docs
PDF/A ("pdf_variant": "pdf/a-2b" or "pdf/a-3b") PDF/A-2b or PDF/A-3b output on paid plans, checked with veraPDF on pdfrender's sample documents Yes docs
Tagged PDF (PDF/UA) Not offered by pdfrender No docs

The tested CSS

This page uses the snippets below. Each one was sent to /v1/render inside a short HTML document.

@page { margin: 25mm 20mm;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); } }
@page :first { @top-center { content: none; } }
@page wide { size: A4 landscape; }
.wide { page: wide; }
section.chapter { page: chapter; break-before: page; }
@page :nth(1 of chapter) { counter-reset: page 1; }
.row { display: flex; justify-content: space-between; }
@media (min-width: 1px) { p { display: none; } } /* ignored */

Fonts need a data: URI in @font-face (how). Headers and page numbers are explained in the headers and footers guide.

Next step

Paste your HTML into the free tool and check the PDF.

FAQ

Do Tailwind classes work?
Only partly. Classes with a breakpoint prefix such as md:flex compile to width media queries, which the renderer ignores. Check the classes you use in the free tool.
Can I use Google Fonts?
Not by URL, because pdfrender loads nothing from the network. Download the font file and embed it with @font-face as a data: URI.