Wednesday, March 7, 2012

How to embed fonts in EPUB?

I tried to read Chinese font in Kobo's Wireless eReader (KOBO WI FI) recently, and I found a way to do it, maybe it is the only solution for KOBO WIFI.

So I prepared a step by step guide to explain how to make any exists epub file work as following, I also prepared several screenshots for you.

  1. Prepare the zip tool - 7zip, you can download it from here, and install it
  2. Rename the epub file to zip
  3. Extract files into a folder using 7zip
  4. Copy the font file DroidSansFallback.ttf into the unzipped folder
  5. Edit stylesheet.css add the font and use it, the original and changed css as following

  6. @namespace h "http://www.w3.org/1999/xhtml";
    
    body{
        margin:10px;
        font-size: 1.1em;
    }
    
    p{text-indent:2em; line-height:1.5em; margin-top:0; margin-bottom:0;}
    
    .catalog{
        margin:1pt;
        padding:0;
        text-indent:2em;
    }
    
    h1{text-align:right; margin-right:2em; page-break-before: always; font-size:1.6em; font-weight:bold;}
    
    h2{
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 0.83em;
        margin-left: 0;
        margin-right: 0;
        margin-top: 1em;
        page-break-before: always;
    }
    
    .mbppagebreak {
        display: block;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        page-break-after: always
    }
    
    a{
        color: inherit;
        text-decoration: inherit;
        cursor: default
    }
    
    a[href]{
        color: blue;
        text-decoration: underline;
        cursor: pointer
    }
    
    .italic{
        font-style: italic
    }
    

    @font-face{
        font-family:"Droid Sans Fallback";
        font-style:normal;
        font-weight:normal;
        src:local("DroidSansFallback.ttf"), url("DroidSansFallback.ttf");
    }
    
    body{
        margin:5%;
        font-family:"Droid Sans Fallback";
    }
    
    p{
        text-indent:0.25in;
        margin:0;
        line-height:150%;
        text-align:justify;
        font-size:100%;
        font-family:"Droid Sans Fallback";
    }
    

  7. Edit content.opf to change any metadata not in latin to latin chracter

  8.     三国演义(毛评本)
        罗贯中
        三国演义(毛评本)
        zh-cn
        
        COAY.COM [http://www.coay.com]
        COAY.COM
        2610
        三国演义(毛评本)
    

        SanGuoYanYi
        LuoGuanZhong
        SanGuoYanYi
        zh-cn
        
        COAY.COM [http://www.coay.com]
        COAY.COM
        2610
        SanGuoYanYi
    

  9. Zip the folder content using 7zip
  10. Rename the zip file to epub
  11. Drop it into your KOBO WIFI and enjoy reading

This was tested on KOBO WIFI and android 2.1 tablet and smartphone.

2 comments:

  1. Thanks the procedure seems to be working.
    A few more points:
    1. I found the DroidSansFallBack.ttf from Android SDK. Not sure if exists anywhere else. Maybe a link is helpful.
    2. The Bold font doesn't seem to be working. The source seems to be:
    〈h3 class="calibre6"〉中文版序〈/h3〉
    Not sure how to fix that?

    ReplyDelete
    Replies
    1. 1. The font you found should be the one I am using.
      2. Do you have the class "calibre6" in the CSS file, if you already have it, please make sure you have following font setting inside.

      .calibre6 {
      font-weight: bold;
      font-family:"Droid Sans Fallback";
      ...
      }

      Delete

Java, JavaScript, HTML, XHTML, AJAX, CSS, etc.