Custom CSS & Fonts

NOTE:

After adding fonts or CSS, you will need to close and reopen Hyphen for your changes to take effect.

Fonts

Adding fonts is as simple as dropping them into Hyphen's Documents in iTunes (or iFunBox). They'll then appear under the Font List. Both .otf and .ttf fonts are supported.

CSS

Hyphen currently only accepts a single .css file placed in its Documents folder. You can use additional assets like images as well by specifying the proper (relative) path to them. This CSS file will be applied to all books.

Overriding Properties

You may find that sometimes your CSS properties don't appear to have any effect. In these cases, using the !important declaration will often solve the problem, e.g.:

body {
   font-size: 2000px; /* doesn't work */
   font-size: 2000px !important; /* works */
}

Special Selectors

There are times when you might want to use certain styling in a particular case. Hyphen provides two selectors to make this easier, for both Night Mode and Footnotes.

Night Mode:

Using the html.hyphen-night-mode selector. For example:

/* makes all images grayscale */

html.hyphen-night-mode img, html.hyphen-night-mode svg {
   -webkit-filter: grayscale(1); /* or */
   -webkit-filter: grayscale(1) invert(1);
}

Within Footnotes:

Using the html.hyphen-footnote selector. For example:

/* Increases the font size: */

html.html.hyphen-footnote {
   font-size: 50px !important;
}