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.
Java, JavaScript, HTML, XHTML, AJAX, CSS, etc.