What CSS properties are safe to use in EPUBs?

Safe properties across all major e-readers: font-size in em/rem (not px), line-height, margin and padding, text-align, text-indent, page-break-before/after, border, color for text, display:block/inline/inline-block. Avoid: position:fixed, viewport units (vh/vw), float for layout, CSS Grid on older Kindles, and pixel font sizes that override user font settings.

Why does my EPUB CSS look different on Kindle vs Apple Books?

E-readers apply different default stylesheets and user override rules. Kindle overrides font-family with the user's chosen font. Kindle ignores background colors in dark mode. Apple Books has the best CSS support (Chromium-based) and respects most CSS 3 properties. Kobo is between the two. Design for the most restrictive target (Kindle) and test in Apple Books and Kobo. Use em units instead of px to respect user font size settings.

How do I add page breaks between chapters in an EPUB?

Use CSS on the chapter heading: h1.chapter-title { page-break-before: always; break-before: page; }. Include both the old page-break-before property (for EPUB 2 compatibility) and the newer break-before (CSS 3). Page breaks only affect paginated reading mode — in scroll mode readers they're ignored.

Can I use Google Fonts in an EPUB?

Not via CDN link (no internet access in e-readers). Embed the font file directly: download the OTF/TTF from Google Fonts (which uses the SIL Open Font License — freely embeddable), add it to the Fonts/ folder, and reference it with @font-face in your CSS. Subset the font with pyftsubset to reduce file size before embedding.

EPUB CSS — A Complete Styling Guide for E-Reader Publishing

CSS in EPUBs works like web CSS, but e-readers impose restrictions and quirks. Here's what you can use, what to avoid, and patterns that work across Kindle, Kobo, and Apple Books.

How EPUB CSS Works

EPUB chapter files are XHTML documents that reference CSS stylesheets in the Styles/ folder. CSS is linked in the <head> of each chapter:

<link rel="stylesheet" type="text/css" href="../Styles/styles.css"/>

EPUB 3 uses the CSS 2.1 + CSS 3 subset defined in the EPUB 3 CSS Profile. Readers implement this profile at varying levels — Kindle, Kobo, and Apple Books each have quirks and gaps.

Safe CSS — Works Everywhere

/* Body and text */
body {
  font-family: serif; /* let readers override with their font */
  font-size: 1em;     /* relative to reader's user font size */
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Headings */
h1 { font-size: 1.8em; margin: 1.5em 0 0.5em; text-align: center; }
h2 { font-size: 1.4em; margin: 1.2em 0 0.4em; }
h3 { font-size: 1.1em; margin: 1em 0 0.3em; }

/* Paragraphs */
p { margin: 0; text-indent: 1.2em; }
p.first-para, h1 + p, h2 + p { text-indent: 0; } /* no indent after heading */

/* Links */
a { color: inherit; text-decoration: underline; }

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Code */
pre, code { font-family: monospace; font-size: 0.9em; }
pre { white-space: pre-wrap; overflow-wrap: break-word; }

CSS to Avoid in EPUBs

Property	Problem	Alternative
`position: fixed`	Rejected by EPUBCheck; broken on all readers	Don't use
`vh, vw` units	Viewport units ignored or broken on most readers	Use `em`, `%`, or pixel units
`float: left/right`	Inconsistent across readers; breaks reflowing	Use margins/padding for spacing
`display: grid`	Not supported on older Kindle firmware	Use tables or simple flexbox
`@media` queries	Partial support; don't rely on breakpoints	Design for single-column reflow
`font-size: px`	Overrides user font size setting	Use `em` or `rem`

Page Breaks

Control page breaks between chapters using CSS:

/* Force chapter to start on new page (paginated readers) */
h1.chapter-title { page-break-before: always; }

/* EPUB 3 equivalent (use both for compatibility) */
h1.chapter-title {
  page-break-before: always;
  break-before: page;
}

In scroll mode readers (Thorium Reader scroll mode, iBooks on iPhone in some orientations), page breaks are ignored — they only affect paginated reading modes.

Drop Caps

p.drop-cap::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin: 0.1em 0.1em 0 0;
  font-weight: bold;
}

Drop caps work in Apple Books and Thorium Reader. Kindle renders ::first-letter but the float behavior is inconsistent. Test before using in production.

Tables

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 1em 0;
}
th, td {
  border: 1px solid #ccc;
  padding: 0.4em 0.6em;
  text-align: left;
}
th { font-weight: bold; background-color: #f0f0f0; }

Background colors on table cells render in Apple Books and Kobo. Kindle ignores background colors by default when in sepia/night mode — don't rely on them for essential information.

Reader-Specific Notes

Kindle: Overrides font-family with the user's chosen font unless you add -webkit-text-size-adjust: none (not recommended — prevents accessibility font scaling).
Kobo: Respects most CSS 2.1 + some CSS 3 properties. Supports custom fonts well.
Apple Books: Best CSS support of all e-readers — renders most standard CSS correctly including flexbox.
Thorium Reader: Uses Chromium-based rendering — full CSS support, useful for testing.

Converting a PDF to EPUB? toolkit.bot generates clean semantic HTML ready for CSS styling.

Convert PDF to EPUB →