05-22-2010, 10:25 AM | #1 |
Bookworm
Posts: 104
Karma: 26
Join Date: Sep 2009
Location: Central Georgia, USA
Device: PRS-600, Nook STR
|
PRS-600 doesn't display correct fonts in ePub files.
I’ve been trying to get my PRS-600 to display ePub files with the fonts the source file is formatted with, but so far nothing has worked. I’ve decided that the problem must lie with the way PRS-600 renders the fonts in an ePub file, not with the content or format of the file.
I’m using a three line “Quick brown fox..,” test file with Times New Roman, Georgia, and Arial fonts. The Arial isn’t important to me – just threw it in for variety. I’ve changed the fonts at three stages of the conversion process: RTF, HTM, and EPUB. In each test, the Calibre ePub viewer showed the correct font, but the PRS-600 showed all three lines in the ePub file in what appears to me to be Times New Roman. However, when I transfer the unconverted file in RTF format straight to the reader, it shows the Arial line correctly, and the other two as Times New Roman. (Calibre still shows all three lines correctly in the RTF version.) It looks like the reader might be displaying any serif font as Times New Roman, and sans serif fonts as Arial. Further testing of ePub files would be necessary to prove this is true in all cases. I don’t think the problem is with the ePub file. I just haven’t been able to get the reader to display a serif font as other than Times New Roman. Any ideas on how to get around this? I’ve seen posts about putting other fonts on the 300, but, if I’m doing it right, it doesn’t work for my 600. |
05-22-2010, 10:32 AM | #2 |
Resident Curmudgeon
Posts: 75,899
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Can you please post the CSS from the ePub so we can see what you've done? I know for a fact that embedded fonts on the 600 do in fact work.
What it might be is that you've specified the fonts in the RTF and thus, the viewer is picking the fonts up from your computer but that you've not actually embedded any fonts in the ePub. Did you actually include the font files in the ePub and then edit the CSS to properly use them? |
Advert | |
|
05-22-2010, 10:49 AM | #3 |
Bookworm
Posts: 104
Karma: 26
Join Date: Sep 2009
Location: Central Georgia, USA
Device: PRS-600, Nook STR
|
I'm not sure about properly embedding the fonts. I created a folder in the root of the reader and copied the Georgia ttf fonts to it.
I've copied both the Style Sheet and Text file from the ePub file. Style Sheet: @namespace h "http://www.w3.org/1999/xhtml"; .MsoNormal { display: block; font-family: "Times New Roman"; font-size: 1em; margin-bottom: 0.0001pt; margin-left: 0; margin-right: 0; margin-top: 0 } .Section { display: block; page: Section1 } .calibre { display: block; font-family: "Georgia", serif; font-size: 1em; margin-bottom: 0; margin-left: 5pt; margin-right: 5pt; margin-top: 0; page-break-before: always } .calibre1 { font-family: Georgia } .calibre2 { font-family: Arial } a { color: inherit; text-decoration: inherit; cursor: default } a[href] { color: blue; text-decoration: underline; cursor: pointer } Text File: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="Microsoft Word 11 (filtered)" name="Generator" /> <title>The quick brown fox jumped over the lazy dog’s back</title> <meta content="http://www.w3.org/1999/xhtml; charset=utf-8" http-equiv="Content-Type" /> <link rel="stylesheet" href="../Styles/stylesheet.css" type="text/css" /> <style type="text/css"> @page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; } @font-face { font-family: Georgia; panose-1: 2 4 5 2 5 4 5 2 3 3 } @font-face { font-family: "Georgia"; font-weight: normal; font-style: normal; src: url(res:///Data/fonts/georgia.ttf) } @font-face { font-family: "Georgia"; font-weight: bold; font-style: normal; src: url(res:///Data/fonts/georgiab.ttf) } @font-face { font-family: "Georgia"; font-weight: normal; font-style: italic; src: url(res:///Data/fonts/georgiai.ttf) } @font-face { font-family: "Georgia"; font-weight: bold; font-style: italic; src: url(res:///Data/fonts/georgiaz.ttf) } </style> </head> <body class="calibre"> <div class="Section"> <p class="MsoNormal">Times New Roman 12 pt.</p> <p class="MsoNormal">The quick brown fox jumped over the lazy dog’s back.</p> <p class="MsoNormal"><span class="calibre1"> </span></p> <p class="MsoNormal"><span class="calibre1">Georgia</span> <span class="calibre1">12 pt.</span></p> <p class="MsoNormal"><span class="calibre1">The quick brown fox jumped over the lazy dog’s back.</span></p> <p class="MsoNormal"><span class="calibre2"> </span></p> <p class="MsoNormal"><span class="calibre2">Arial 12 pt.</span></p> <p class="MsoNormal"><span class="calibre2">The quick brown fox jumped over the lazy dog’s back.</span></p> </div> </body> |
05-22-2010, 11:38 AM | #4 |
Grand Sorcerer
Posts: 6,216
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
I'm not ready to give up on you yet, Jim.
I've attached a zip file containing 3 items:
The EPUB definitely displays in Georgia on my PRS505. Just drag-drop it to your PRS600 and view it. It does not have the fonts embedded in it, just the pointers to the fonts on your reader memory. If the EPUB doesn't work then either customised fonts doesn't work on the PRS600 or the fonts are not correctly referenced. Check your spellings, don't forget that the file and path names are case-sensitive, i.e. Data/Fonts/georgia.ttf is not the same as Data/fonts/georgia.ttf. If the EPUB does work then your reader is obviously capable and your source ebook needs examining. You can look at my raw HTML. I do not have any styling whatsoever in there, i.e. no references to font. Perhaps you could post your test source. |
05-22-2010, 01:08 PM | #5 | ||
Nameless Being
|
I looks as though your CSS was okay for @font-face { } code but I didn't see a reference to use the "Georgia" font face. See the BODY tag statement in the example below.
A font family can be assigned multiple fonts for normal, bold, italic, and bold-italic text. (See second example.) If you want to use multiple font familes you will need to embed all the fonts in the file, which will make for a large, cumbersome file. Example 1: Georgia font family If you want to reference the Georgia font installed into the Sony PRS-600 root in a folder named fonts, then you would use this CSS: Quote:
src: url(res:///Data/fonts/ is pointing to the fonts folder on the ROOT of the PRS-600 (or 300 or 900). Notice that there are four font files for the Georgia font wherein
Not all fonts have four associated files, but Georgia does. Example 2: Custom font family If you want to reference multiple fonts installed into the Sony PRS-600 root in a folder named fonts, then you would use this CSS: Quote:
The following screenshots illustrate Example 1 and then Example 2 on my PRS-300: ... Last edited by jswinden; 05-22-2010 at 07:38 PM. |
||
Advert | |
|
05-22-2010, 02:05 PM | #6 | |
Nameless Being
|
Quote:
CSS files are read and interpreted in sequential order from beginning to end. In other words, you must first define something in CSS before you can refer to it. So @font-face { } needs to precede (be defined prior to) any subsequent references to it. Last edited by jswinden; 05-22-2010 at 02:57 PM. |
|
05-22-2010, 02:26 PM | #7 | |
Grand Sorcerer
Posts: 6,216
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
Quote:
I finally settled on a single "Extra CSS" file which combined my favourite serif, sans-serif, monospace and SmallCaps fonts. Each of the "favourites" has the full set of regular, italic, bold and bolditalic variations. Last edited by jackie_w; 05-22-2010 at 02:42 PM. |
|
05-22-2010, 02:41 PM | #8 | |
Nameless Being
|
Quote:
Here's a screenshot showing multiple font families: ... Last edited by jswinden; 05-22-2010 at 03:56 PM. |
|
05-22-2010, 03:37 PM | #9 |
Bookworm
Posts: 104
Karma: 26
Join Date: Sep 2009
Location: Central Georgia, USA
Device: PRS-600, Nook STR
|
Thanks for not giving up.
I wasn’t trying to do multiple fonts. My only interest was in the Georgia font. I just put the other two in my test file so I could see if there was a difference in the output. It’s easier to see a difference in the overall line length between Times New Roman and Georgia fonts than it is to zoom in on the characters to see the difference in serif shapes. In the root of my Reader, I have five folders: database, Digital Editions, Documents, fonts, and tmp. The Georgia fonts (all four of them) are in the fonts folder. In Windows Explorer on my computer, these are under the M:\ directory. I don’t know HTML, so if “///Data/” is the same as “M:\” the fonts should be in the right place. I did have a mistake in the Georgia ttf names on the reader. I had capitalized them. Actually I just dragged a copy from my PC to the reader, but they still didn’t match the src: url(res......) code. Unfortunately, making the capitalization of the font names match didn’t make any difference. Jackie_w, I dragged your ePub file to my reader. It shows up as Times New Roman. Same thing when I added it to Calibre and viewed it there. I also did a full conversion of the HTM to EPUB with Calibre and your Extra CSS with the same results. jswinden, I have the (body { font-family: "Georgia", serif; }) code in my Calibre Estra CSS pane, but it does not show up in the ePub stylesheet.css when viewed with Sigil. I don’t know why it was dropped. I’m not sure if I totally understand what you’re saying about the font vs. font-family value and quotes, but I modified the font-family statement like this: font-family: ““Georgia””, serif; It didn’t make a difference. Thanks again for your input. |
05-22-2010, 04:04 PM | #10 |
Grand Sorcerer
Posts: 6,216
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
Jim, Can you post the EXACT names the 4 Georgia fonts have when viewed on your M:\fonts directory.
By the way, I wouldn't expect my solution to show as Georgia in the Calibre viewer, only on your reader. A screen capture would be ideal. |
05-22-2010, 04:09 PM | #11 | ||
Nameless Being
|
Quote:
Quote:
font-family: "Georgia", serif; As far as the order in which the CSS should occur ensure that this: @font-face { font-family: "Georgia"; font-weight: normal; font-style: normal; src: url(res:///Data/fonts/georgia.ttf); } @font-face { font-family: "Georgia"; font-weight: bold; font-style: normal; src: url(res:///Data/fonts/georgiab.ttf); } @font-face { font-family: "Georgia"; font-weight: normal; font-style: italic; src: url(res:///Data/fonts/georgiai.ttf); } @font-face { font-family: "Georgia"; font-weight: bold; font-style: italic; src: url(res:///Data/fonts/georgiaz.ttf); } appears in the CSS file prior to body { font-family: "Georgia", serif; } I know CSS is complicated, and even more so since HTML works better in PC/Mac browsers than ePubs do in Sony Readers. With HTML and PC/Mac web browsers, the browsers are smart enough to locate the fonts installed on your computer. So a statement in CSS like body { font-family: Georgia, serif; } works in your computer browser because Georgia is the name of a font that the browser recognizes and can find on your computer without you having to tell the browser where to look. Pretty easy stuff on the computer because computer browsers are VERY forgiving and allow you to use non-standard syntax up to a certain point. However, the Sony Reader displays ePub files and though they use CSS for formatting, it is not as smart or forgiving of a system. You have to tell the Sony Reader where the fonts are located and then you have to define each font family via an @font-face { } statement. The name you assign to a font-family using @font-face has to be in double quotations, for example "Georgia". After you define your font family, you need to reference it in an HTML tag like the body tage, but you have to use the double quotations. For example, body { font-family: "Georgia", serif; } because unlike a PC browser the Sony Reader follows a strict syntax. Last edited by jswinden; 05-22-2010 at 04:26 PM. |
||
05-22-2010, 04:18 PM | #12 |
Grand Sorcerer
Posts: 6,216
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
I am adding a screen capture of what the Georgia epub file looks like on my PRS505.
The most obvious place that confirms the font has been used is the lower-case "f". P.S. I would still like to try your test file source on my setup if you want to post it here. It doesn't seem likely that this technique would work on a PRS300, 505, and 900 but not the 600. Last edited by jackie_w; 05-22-2010 at 04:32 PM. |
05-22-2010, 04:30 PM | #13 |
Nameless Being
|
Nice screenshot. What capture program are you using? I haven't been able to locate one for my 300 or 900.
|
05-22-2010, 04:41 PM | #14 |
Grand Sorcerer
Posts: 6,216
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
The capture utility is a small part of the wonderful PRSPlus hack, from MR member kartu on the MR Sony Development forum. I believe it is currently only available for the PRS505, though. You can read all about it in the "Sticky" there. However, you may feel a bit envious after you've read it.
|
05-22-2010, 04:47 PM | #15 |
Nameless Being
|
BTW, part of the confusion is probably due to the fact we are using a standard font name Georgia for the font-family name, for example "Georgia". You could name your font family whatever you want to. For example, you could name it "MSJim". In that case the CSS would look like this:
@font-face { font-family: "MSJim"; font-weight: normal; font-style: normal; src: url(res:///Data/fonts/georgia.ttf); } @font-face { font-family: "MSJim"; font-weight: bold; font-style: normal; src: url(res:///Data/fonts/georgiab.ttf); } @font-face { font-family: "MSJim"; font-weight: normal; font-style: italic; src: url(res:///Data/fonts/georgiai.ttf); } @font-face { font-family: "MSJim"; font-weight: bold; font-style: italic; src: url(res:///Data/fonts/georgiaz.ttf); } body { font-family: "MSJim", serif; } In this example, a statement like body { font-family: Georgia, serif; } located within an HTML document will cause the web browser to use the Georgia font to display the text. But the same statement in an ePub book would result in the Sony Reader being unable to interpret this statement and would instead display the ePub text in the Reader's default serif font. Why? Because the Sony Reader cannot interpret font names directly, fonts must be defined through @font-face statements. In this example, a statement like body { font-family: "MSJim, serif; } in an ePub book would tell the Sony Reader to use the MSJim font family. The Reader would then lookup the specifics on the MSJim font family, note that it uses the Georgia font, and thus display the text using the Georgia font. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
PRS-600 Replace DEFAULT epub fonts! (PRS-600) | pepak | Sony Reader | 33 | 08-04-2023 02:31 PM |
Georgia fonts on PRS-600 | MSJim | Calibre | 19 | 12-31-2010 12:31 AM |
PRS-600 Fonts on the PRS-600 | forkyfork | Sony Reader | 12 | 12-13-2010 02:54 AM |
PRS-600 Display | merlianne | Sony Reader | 7 | 05-11-2010 01:00 AM |
PRS-600 Fonts on the PRS-600 | ghostyjack | Sony Reader | 4 | 11-05-2009 02:00 PM |