FAQ: custom external font faces

[danielweck]

In the reader's settings, the fontSelection index is zero-based and indicates the chosen item from an array of choices (zero means "default publisher font", other integers mean "custom reading system font"):

https://github.com/readium/readium-shared-js/blob/9bb1df070c6b2bca5a4938313653f743ffd37c1a/js/models/viewer_settings.js#L44-L50

The reader's array of custom fonts is provided at construction time:

https://github.com/readium/readium-shared-js/blob/9bb1df070c6b2bca5a4938313653f743ffd37c1a/js/views/reader_view.js#L77

Here is a concrete example of such array, as configured in ReadiumJS (cloud / web reader + Chrome app / extension):

https://github.com/readium/readium-js-viewer/blob/2a41a144ad75cb33058c0684a817aa2fe332f907/src/fonts/fonts.js#L1-L42

Note that although the url field of each JSON font object can be a relative path, in fact the getFontFaces() function at the bottom of the Javascript source file takes a URLprefix parameter to complete the final array of fonts with absolute URLs. In other words, a native app must ensure that each font's HTTP URL resolves to the correct payload, which is typically a CSS file that declares the font faces, for example OpenDyslexic:

https://github.com/readium/readium-js-viewer/tree/2a41a144ad75cb33058c0684a817aa2fe332f907/src/fonts/OpenDyslexic

The fontFamily string of characters in the JSON font object is meant to be used as-is in a CSS font-family statement, and will be applied automatically by the readium-shared-js layout / rendering engine when a the fontSelection setting changes:

https://github.com/readium/readium-shared-js/blob/9bb1df070c6b2bca5a4938313653f743ffd37c1a/js/views/reader_view.js#L582-L646

The actual DOM/CSS logic is implemented in:

https://github.com/readium/readium-shared-js/blob/9bb1df070c6b2bca5a4938313653f743ffd37c1a/js/helpers.js#L248-L457