Font not loading in Epub

Ebooks Asked by Lance Pollard on September 26, 2021

I have this folder structure:

./Fonts/chimod.otf
./Styles/style.css
./Text/main.xhtml
content.opf
toc.ncx

Here is the content.opf:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

    <!-- ISBN -->
    <dc:identifier id="bookid" opf:scheme="ISBN">urn:isbn:971-1-911701-61-8</dc:identifier>
    <dc:title>Title</dc:title>
    <dc:rights>Copyright © 2020 Foo. All rights reserved.</dc:rights>

    <!-- BISAC Subject Headings List: http://bisg.org/?page=BISACFaQ -->
    <dc:subject>Religion / Philosophy / Nature</dc:subject>

    <!-- https://www.loc.gov/marc/relators/relacode.html -->
    <dc:creator opf:file-as="Foo" opf:role="bkd">Foo</dc:creator>

    <dc:publisher>Foo</dc:publisher>
    <dc:date opf:event="publication">2020-07-14</dc:date>

    <!-- Language code: http://en.wikipedia.org/wiki/List_of_ISO_639-2_codes -->
    <dc:language>en</dc:language>

    <meta name="cover" content="[COVER_NAME].jpg" />

    <!-- UUID generator: http://www.famkruithof.net/uuid/uuidgen -->
    <dc:identifier opf:scheme="UUID">urn:uuid:7d6649a0-c5cb-1aea-8b6e-08a020ac9a66</dc:identifier>
  </metadata>
  <manifest>
    <item id="css-fonts" href="Styles/style.css" media-type="text/css" />
    <item href="Text/main.xhtml" id="main" media-type="application/xhtml+xml" />
    <item href="Fonts/chimod.otf" id="chimod.otf" media-type="application/opentype" />
    <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml" />
  </manifest>
  <spine toc="ncx">
    <itemref idref="main" />
  </spine>
  <guide>
    <reference href="Text/main.xhtml" type="text" />
  </guide>
</package>

Here is the style:

@font-face {
  font-family: Zh;
  font-weight: normal;
  font-style: normal;
  src: url(../Fonts/chimod.otf) format('otf');
}

@page {
  margin: 0;
  padding: 0;
  size: 178mm 254mm;
  color: #333;
}

body {
  font-family: Zh;
  color: #333;
}

Here is the HTML:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title</title>
    <link rel="stylesheet" href="../Styles/style.css"/>
  </head>
  <body><span class="f-zh q">二</span></body></html>

Why isn’t the font loading and displaying when I open the Epub?

I am compiling with this: https://github.com/javierarce/epub-boilerplate. I customized that to get it working. Getting no errors about resources not found. The font is the Chinese google noto font.

fonts

Add your own answers!

Ask a Question

Get help from others!