Quote:
Originally Posted by MSJim
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.
|
Sounds like you have the fonts located in the correct place on the Reader. See images below for how it looks in Windows Explorer on my PC where the Reader shows up as Drive L.
Quote:
Originally Posted by MSJim
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.
|
Sorry about the confusion, I should have worded that better. Single quotes look like ' and double quotes look like ", so it should read like this:
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.