Search code examples
htmlcssfontsepub

Multiple @font-face ignored in epub

I am generating EPUB files with embedded fonts using ebook-convert from the calibre project. When I declare multiple font faces in HTML, it works fine:

<html>
<head>
<style type="text/css">
@font-face{
font-family: "test";
font-style: normal;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Regular.otf);
}
@font-face{
font-family: "test";
font-style: italic;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Italic.otf);
}
body{
font-family: "test";
}
</style>
</head>
<body>
This is a test with <i>italic</i>.
</body>
</html>

produces:

fonts in HTML

but when I convert it to EPUB, I only get the first font for the whole document:

same code in the EPUB

I checked the EPUB. The fonts are embedded properly and the CSS is included. There can't be a conflict with my system fonts since I used "test" as a string to identify the font.

What is wrong with EPUB? Am I declaring the fonts wrong?

Solution

  • This blog post about epub fonts may help