ePub custom Fonts on all Sonys - Page 16

Lloyd Simcoe · 09-03-2010, 03:20 PM

Quote:

Originally Posted by wallcraft

I don't think this is complicated. If ADE (or a web browser for that matter) fails to find the referenced font then it uses the default font, and hence the question marks. The "res://" is with respect to the app's root directory, but that does not have to be the system's root directory. So, the Mac ADE has the expected root but the Window's ADE has some other root - which we don't know (or I guess it could have no root at all, for "security" reasons).

There are a couple of examples of this with mobile ADE:

The Windows Sony ebook library reader has a root of C:\Program Files\Sony\Reader\Data\bin.

Apparently something has changed with the release of version 3.3 of Sony Reader Library, because it no longer recognizes my external fonts. Does anybody have a solution?

notsure · 11-14-2010, 08:32 AM

Should this work on a Sony PRS-350?

I tried doing this on a book downloaded from MR (the most excellent The Count of Monte Cristo).

I added the fonts folder to my device and included the code in the Calibre extra css section then re-converted the book.

When I open the book it still appears to be using the same old font.

Thanks!

jackie_w · 11-14-2010, 03:19 PM

@notsure,
I don't have a PRS-350 but I believe it should work. Is it possible to attach your converted epub for a closer look?

notsure · 11-14-2010, 06:03 PM

Sure!

This is what I put into calibre's extra css section;

Code:

@font-face {
  font-family: "Fontin";
  font-weight: normal;
  font-style: normal;
  src: url(res:///Data/fonts/Fontin-Regular.ttf);
}

@font-face {
  font-family: "Fontin";
  font-weight: bold;
  font-style: normal;
  src: url(res:///Data/fonts/Fontin-Bold.ttf);
}

@font-face {
  font-family: "Fontin";
  font-weight: normal;
  font-style: italic;
  src: url(res:///Data/fonts/Fontin-Italic.ttf);
}

body {
  font-family: "Fontin", serif;
}

jackie_w · 11-14-2010, 07:38 PM

@notsure

Try this:

Reimport the original epub, i.e. before you did any conversions.

Convert using all the ExtraCSS you had before, but replace

Code:

body {
  font-family: "Fontin", serif;
}

with

Code:

body.calibre {
  font-family: "Fontin", serif;
}

notsure · 11-15-2010, 08:14 PM

That did the trick!

How did you know to do that? I didn't see it listed anywhere.

Thanks again.

jackie_w · 11-15-2010, 09:30 PM

Quote:

Originally Posted by notsure

How did you know to do that? I didn't see it listed anywhere.

Unfortunately there is no one way which always works. You have to look at the HTML and CSS inside the epub to decide what needs to go in ExtraCSS.

In your source epub each piece of HTML started with:

Code:

<body text="#000000" class="calibre">

rather than just plain

Code:

<body>

And the relevant bit of CSS contained:

Code:

.calibre {
    background-color: #fff;
    display: block;
    font-family: Times New Roman;
    font-size: 1em;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 13pt;
    margin-top: 0;
    page-break-before: always;
    text-align: justify
    }

i.e. the font-family you needed to override was at a lower level than <body>. Hence, to replace "Times New Roman" with "Fontin" in the converted epub CSS you needed the ExtraCSS to specify
body.calibre {font-family: "Fontin", serif;}

[By the way, I know you didn't create the source epub, but for info, there should have been double quotes around the Times New Roman because it contained spaces.]

notsure · 11-16-2010, 07:18 AM

Ahhhh. That kind of makes sense to me.

I guess I will have to experiment some more on my own with different epubs.

These forums are an amazing resource thanks to people like you.

Cheers.

JSWolf · 11-25-2010, 08:26 AM

Yes, this trick works on the 350, 650, & 950.

elanamig · 01-02-2011, 03:59 PM

Quote:

Originally Posted by JSWolf

Yes, this trick works on the 350, 650, & 950.

I tried the steps to add Liberation fonts (for cyrillic support) to PRS-350, but it did not work... All cyrillic characters show up as ?...

What I did:

1. Added Liberation directory to fonts directory, with Liberation .ttf fonts inside.
2. Added the following refs into the CSS using Sigil:

@font-face {
font-style: italic;
font-family: 'Liberation', serif, sans-serif;
font-weight: normal;
src: url((res:///Data/fonts/Liberation/LiberationSerif-Italic.ttf);
}
@font-face {
font-style: normal;
font-family: 'Liberation', serif, sans-serif;
font-weight: normal;
src: url((res:///Data/fonts/Liberation/LiberationSerif-Regular.ttf);
}
@font-face {
font-style: italic;
font-family: 'Liberation', serif, sans-serif;
font-weight: bold;
src: url((res:///Data/fonts/Liberation/LiberationSerif-BoldItalic.ttf);
}
@font-face {
font-style: normal;
font-family: 'Liberation', serif, sans-serif;
font-weight: bold;
src: url((res:///Data/fonts/Liberation/LiberationSerif-Bold.ttf);
}

3. Added the following to css:
body.calibre {
font-family: "Liberation", sans-serif;
}

(Since body tag has class=calibre).

What else could I be missing???
Any help would be super-greatly appreciated!

Thank you!

jackie_w · 01-02-2011, 04:11 PM

@elanamig,
Can you post the whole css file contained in the epub which isn't working?

elanamig · 01-02-2011, 05:46 PM

Quote:

Originally Posted by jackie_w

@elanamig,
Can you post the whole css file contained in the epub which isn't working?

Thank you for replying to my call for help!!

The css file was generated by calibre when I converted fb2 to epub. Here it is (Please, note, that since my last post I got rid of the "Liberation" directory in the fonts folder, since I thought that maybe sony does not load fonts recursively from dirs):

@font-face {
font-style: italic;
font-family: 'Liberation', serif, sans-serif;
font-weight: normal;
src: url(res:///Data/fonts/LiberationSerif-Italic.ttf);
}
@font-face {
font-style: normal;
font-family: 'Liberation', serif, sans-serif;
font-weight: normal;
src: url(res:///Data/fonts/LiberationSerif-Regular.ttf);
}
@font-face {
font-style: italic;
font-family: 'Liberation', serif, sans-serif;
font-weight: bold;
src: url(res:///Data/fonts/LiberationSerif-BoldItalic.ttf);
}
@font-face {
font-style: normal;
font-family: 'Liberation', serif, sans-serif;
font-weight: bold;
src: url(res:///Data/fonts/LiberationSerif-Bold.ttf);
}
@namespace h "http://www.w3.org/1999/xhtml";

body.calibre {
font-family: "Liberation", sans-serif;
}

.MsoNormal {
display: block;
font-family: "Times New Roman";
font-size: 1em;
margin-bottom: 0.0001pt;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify
}
.Section {
display: block;
page: Section1
}
.book {
display: block;
font-family: "Times New Roman";
font-size: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: justify
}
.calibre {
display: block;
font-size: 0.75em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
page-break-before: always
}
.calibre1 {
display: block;
font-family: "Times New Roman";
font-size: 1.33333em;
font-weight: bold;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: justify
}
.calibre10 {
color: blue;
cursor: pointer;
text-decoration: underline
}
.calibre2 {
font-family: Arial;
font-size: 1em
}
.calibre3 {
color: inherit;
cursor: inherit;
text-decoration: inherit
}
.calibre4 {
font-family: Arial;
font-size: 1.33333em
}
.calibre5 {
font-style: italic
}
.calibre6 {
font-weight: bolder
}
.calibre7 {
font-size: 0.77778em;
line-height: normal;
vertical-align: super
}
.calibre8 {
font-family: Arial;
font-size: 1.71429em
}
.calibre9 {
display: block;
font-family: "Times New Roman";
font-size: 1em;
font-weight: bold;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
margin-top: 1.67em;
text-align: justify
}

Thanks!

jackie_w · 01-02-2011, 06:24 PM

The problem you have with this file is that there are font-family statements at a "lower level" than body or body.calibre.

You should be able to correct the already-converted epub by amending the epub's css file in Sigil or with Tweak-epub in calibre (whatever you're comfortable with). Given the settings in your @font-face statements, there is more than one way to fix this but the following 2 steps should work:

1. Change all those instances of

Code:

font-family: "Times New Roman";

to

Code:

font-family: serif; (or font-family: "Liberation";)

and all those instances of

Code:

font-family: Arial;

to

Code:

font-family: sans-serif;  (or font-family: serif; or font-family: "Liberation";)

I don't want to confuse you but I feel I should also add that the above could also have been achieved via the original Calibre conversion to EPUB if the Calibre ExtraCSS had matched your source file. I can't see the source file so I can't tell you what it should have been. If you want to pursue this for future info, send me a PM and we can take it from there.

2. You also need to make sure your actual font files are in exactly the correct directory as specified in your @font-face statements. e.g. you have referred to the Regular serif font as

Code:

res:///Data/fonts/LiberationSerif-Regular.ttf

which means that looking at your Sony in your PC's file browser you should have a directory

Code:

[Drive:]/fonts

containing the file

Code:

LiberationSerif-Regular.ttf

Everything is case-sensitive so directory names, filenames and extensions must match EXACTLY.

elanamig · 01-02-2011, 06:42 PM

Quote:

Originally Posted by jackie_w

The problem you have with this file is that there are font-family statements at a "lower level" than body or body.calibre.

You should be able to correct the already-converted epub by amending the epub's css file in Sigil or with Tweak-epub in calibre (whatever you're comfortable with). Given the settings in your @font-face statements, there is more than one way to fix this but the following 2 steps should work:

1. Change all those instances of

Code:

font-family: "Times New Roman";

to

Code:

font-family: serif; (or font-family: "Liberation";)

and all those instances of

Code:

font-family: Arial;

to

Code:

font-family: sans-serif;  (or font-family: serif; or font-family: "Liberation";)

I don't want to confuse you but I feel I should also add that the above could also have been achieved via the original Calibre conversion to EPUB if the Calibre ExtraCSS had matched your source file. I can't see the source file so I can't tell you what it should have been. If you want to pursue this for future info, send me a PM and we can take it from there.

2. You also need to make sure your actual font files are in exactly the correct directory as specified in your @font-face statements. e.g. you have referred to the Regular serif font as

Code:

res:///Data/fonts/LiberationSerif-Regular.ttf

which means that looking at your Sony in your PC's file browser you should have a directory

Code:

[Drive:]/fonts

containing the file

Code:

LiberationSerif-Regular.ttf

Everything is case-sensitive so directory names, filenames and extensions must match EXACTLY.

It seems so obvious now that you pointed it out. Changing all font-family refs to Liberation worked. I got rid of the fonts dir on the reader and added a fonts dir to the epub instead, just to make sure all references are good.

What confused me about this before is that Adobe Digital Editions reads the messed up css without problems. But Sony is pickier.

jackie_w · 01-02-2011, 06:53 PM

Well I'm glad it worked for you but I'm slightly surprised as it sounds as if you've embedded the fonts in the epub. I was under the impression that if you do this you must also list the font files in the <manifest> section of the epub's .opf file. Did you do this? If not, perhaps the Sony isn't as picky as you thought.

11-14-2010, 03:19 PM	#228
jackie_w Grand Sorcerer Posts: 6,206 Karma: 16228558 Join Date: Sep 2009 Location: UK Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3	@notsure, I don't have a PRS-350 but I believe it should work. Is it possible to attach your converted epub for a closer look? Last edited by jackie_w; 01-02-2011 at 07:36 PM. Reason: typo

11-14-2010, 07:38 PM	#230
jackie_w Grand Sorcerer Posts: 6,206 Karma: 16228558 Join Date: Sep 2009 Location: UK Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3	@notsure Try this: Reimport the original epub, i.e. before you did any conversions. Convert using all the ExtraCSS you had before, but replace Code: body { font-family: "Fontin", serif; } with Code: body.calibre { font-family: "Fontin", serif; } Last edited by jackie_w; 11-14-2010 at 07:43 PM.

01-02-2011, 06:24 PM	#238
jackie_w Grand Sorcerer Posts: 6,206 Karma: 16228558 Join Date: Sep 2009 Location: UK Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3	The problem you have with this file is that there are font-family statements at a "lower level" than body or body.calibre. You should be able to correct the already-converted epub by amending the epub's css file in Sigil or with Tweak-epub in calibre (whatever you're comfortable with). Given the settings in your @font-face statements, there is more than one way to fix this but the following 2 steps should work: 1. Change all those instances of Code: font-family: "Times New Roman"; to Code: font-family: serif; (or font-family: "Liberation";) and all those instances of Code: font-family: Arial; to Code: font-family: sans-serif; (or font-family: serif; or font-family: "Liberation";) I don't want to confuse you but I feel I should also add that the above could also have been achieved via the original Calibre conversion to EPUB if the Calibre ExtraCSS had matched your source file. I can't see the source file so I can't tell you what it should have been. If you want to pursue this for future info, send me a PM and we can take it from there. 2. You also need to make sure your actual font files are in exactly the correct directory as specified in your @font-face statements. e.g. you have referred to the Regular serif font as Code: res:///Data/fonts/LiberationSerif-Regular.ttf which means that looking at your Sony in your PC's file browser you should have a directory Code: [Drive:]/fonts containing the file Code: LiberationSerif-Regular.ttf Everything is case-sensitive so directory names, filenames and extensions must match EXACTLY. Last edited by jackie_w; 01-02-2011 at 06:28 PM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Any Reader With Custom Fonts and Full Justification?	Loose_Appeal	Which one should I buy?	2	07-16-2010 07:16 AM
ePub with custom .css on a 505	dicknskip	Sony Reader Dev Corner	3	06-09-2010 11:34 PM
Custom TTF fonts in MOBI books?	jpt	Astak EZReader	21	11-21-2009 08:24 AM
Test for custom entities in ePUB	Jellby	ePub	9	05-27-2009 06:45 AM

11-14-2010, 08:32 AM	#227
notsure Zealot Posts: 123 Karma: 76 Join Date: Feb 2009 Device: Sony PRS-505, PRS-350	Should this work on a Sony PRS-350? I tried doing this on a book downloaded from MR (the most excellent The Count of Monte Cristo). I added the fonts folder to my device and included the code in the Calibre extra css section then re-converted the book. When I open the book it still appears to be using the same old font. Thanks!

11-15-2010, 08:14 PM	#231
notsure Zealot Posts: 123 Karma: 76 Join Date: Feb 2009 Device: Sony PRS-505, PRS-350	That did the trick! How did you know to do that? I didn't see it listed anywhere. Thanks again.

11-16-2010, 07:18 AM	#233
notsure Zealot Posts: 123 Karma: 76 Join Date: Feb 2009 Device: Sony PRS-505, PRS-350	Ahhhh. That kind of makes sense to me. I guess I will have to experiment some more on my own with different epubs. These forums are an amazing resource thanks to people like you. Cheers.

11-25-2010, 08:26 AM	#234
JSWolf Resident Curmudgeon Posts: 73,877 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Yes, this trick works on the 350, 650, & 950.

01-02-2011, 04:11 PM	#236
jackie_w Grand Sorcerer Posts: 6,206 Karma: 16228558 Join Date: Sep 2009 Location: UK Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3	@elanamig, Can you post the whole css file contained in the epub which isn't working?

01-02-2011, 06:53 PM	#240
jackie_w Grand Sorcerer Posts: 6,206 Karma: 16228558 Join Date: Sep 2009 Location: UK Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3	Well I'm glad it worked for you but I'm slightly surprised as it sounds as if you've embedded the fonts in the epub. I was under the impression that if you do this you must also list the font files in the <manifest> section of the epub's .opf file. Did you do this? If not, perhaps the Sony isn't as picky as you thought.

Advert

Advert