Stylesheets icon indicating copy to clipboard operation
Stylesheets copied to clipboard

embedding fonts in ePub

Open sebastianrahtz opened this issue 12 years ago • 1 comments

This comes from a TEI feature request by Pablo Rodrigues. He notes that embedding a font requires adding the following code to the CSS file (adapted from http://johnmacfarlane.net/pandoc/README.html): @font-face { font-family: FreeSans; font-style: normal; font-weight: normal; src:url("/OPS/FreeSans.otf"); } @font-face { font-family: FreeSans; font-style: normal; font-weight: bold; src:url("/OPS/FreeSansBold.otf"); } @font-face { font-family: FreeSans; font-style: italic; font-weight: normal; src:url("/OPS/FreeSansOblique.otf"); } @font-face { font-family: FreeSans; font-style: italic; font-weight: bold; src:url("/OPS/FreeSansBoldOblique.otf"); } body { font-family: "FreeSans"; } and actually including the four font files in the said directory. With the files that include text with the serif typeface (such as the one cited as example), it is also be required to be able to embed the that fonts (and the same would be required for the monospaced typeface).

sebastianrahtz avatar Nov 12 '13 16:11 sebastianrahtz

If fonts are embedded, the code above is needed in the CSS file to use the fonts embedded in the ePub document.

Another way to do this would be:

@font-face {font-family: serif;
font-weight: normal;
font-style: normal;
src:url(/OPS/FreeSerif.ttf);
}
@font-face {font-family: serif;
font-weight: normal;
font-style: italic;
src:url(/OPS/FreeSerifItalic.ttf);
}
@font-face {font-family: serif;
font-weight: bold;
font-style: normal;
src:url(/OPS/FreeSerifBold.ttf);
}
@font-face {font-family: serif;
font-weight: bold;
font-style: italic;
src:url(/OPS/FreeSerifBoldItalic.ttf);
}

@font-face{ font-family: sans-serif;
font-style:normal;
font-weight:normal;
src:url(/OPS/FreeSans.ttf);
}
@font-face{ font-family: sans-serif;
font-style:italic;
font-weight:normal;
src:url(/OPS/FreeSansOblique.ttf);
}
@font-face{ font-family: sans-serif;
font-style:normal;
font-weight:bold;
src:url(/OPS/FreeSansBold.ttf);
}
@font-face{ font-family: sans-serif;
font-style:italic;
font-weight:bold;
src:url(/OPS/FreeSansBoldOblique.ttf);
}

@font-face {font-family: monospace;
font-weight: normal;
font-style: normal;
src:url(/OPS/FreeMono.ttf);
} 
@font-face {font-family: monospace;
font-weight: normal;
font-style: italic;
src:url(/OPS/FreeMonoOblique.ttf);
} 
@font-face {font-family: monospace;
font-weight: bold;
font-style: normal;
src:url(/OPS/FreeMonoBold.ttf);
}
@font-face {font-family: monospace;
font-weight: bold;
font-style: italic;
src:url(/OPS/FreeMonoBoldOblique.ttf);
}

I have a similar version in the ereader I use. So I have copied the fonts once to the ereader and I don’t need to embed them in each ePub document.

But the code above works fine without embedding the fonts in the ePub file, only if the ereader has been rooted (which isn’t an option for many people).

Having the option to embed the fonts in the ePub is an essential feature, because otherwise many glyphs might be not displayed.

ousia avatar Nov 14 '13 18:11 ousia