Self serving substitute fonts

WebViewer will automatically use substitute fonts hosted on a web server when a font is not embedded in the document. The fallback fonts are hosted by Apryse by default but if this is a concern, you can host the fonts on your own servers. You can also customize the font package to better suit your needs.

To get started, please download the self serve font package.

Simply expand the webfont archive into a location that is accessible via URL, and set the custom font URL within your WebViewer config file using

Core.setCustomFontURL("https://www.somealternateurl.com/chosensubpath/");

See this guide for more details about config files.

WebViewer will first download fonts.json (which serves as a catalogue of available fonts and matching rules), then it will choose the approriate fonts to download as needed.

It is possible to add new fonts to the webfont backend, and it's possible to customize the matching behaviour. However it is very important that fonts.json closely matches the actual list of available fonts -- if the character set coverage in fonts.json is incorrect, or if it points to font files that do not exist, the stability of WebViewer could be compromised. For this reason, we've made a command-line tool that can be used to safely modify the font set.

Please download the webfont creation tool for Linux, Mac, or Windows (only 64 bit versions of these tools are available at this time).

First, download some variants of the fonts "Lato" and "Raleway", available self serve font package. Expand this archive into WebFontSource/ alongside the already expanded webfont archive.

Then run the WebFontCreator CLI tool on your gathered files using the command line ./WebFontCreator --output ./WebFontDest --base ./WebFontSource/fonts.json --fonts ./WebFontSource This will place a newly generated fonts.json file into ./WebFontDest along with compressed versions of all the fonts. This new fonts.json will be the same as ./WebFontDest/fonts.json, except that it will now contain descriptions and matching rules for Lato and Raleway.

At this point ./WebFontDest is suitable to serve directly as a custom webfont backend for webviewer (using setCustomFontURL())

Core.setCustomFontURL("...");

In order for the supported font to be displayed correctly in the TextEditingPanel during Content edit mode, certain constraints need to be applied in the font.json file.

Within the fontList, each font entry consists of a list of variants that define various styles for the font. It is crucial to include Regular, Italic, and Bold in the variants list, ensuring that the capitalization matches exactly. You have the flexibility to define these styles with or without a hyphen. For example, you could define them as Lato Regular, or as Lato-Regular.

Failure to adhere to these constraints will result in the font being filtered out by the Webviewer. Please note that in the variants, the key should be left unchanged. You can define the desired values, which will generate corresponding font files with the specified names in the variant after the font.json is compiled by the WebFontCreate ClI.

"fontList": [
   {
      "coverage": ...,
      "ext": ...,
      "family": "Lato",
      "id": "lato1",
      "variants": {
         "500": "Lato-Regular",
         "500I": "Lato Italic",
         "700": "Lato Bold",
      }
   }
]

fonts.json has two main components: fontList, a list of the available fonts on the server, and matchPatterns, which tells the office worker how to select the correct font from fontList. At this point fontList should have an entry for Lato, with the id lato1.

The matching algorithm works its way down matchPatterns in order, looking for a match for the font family name. A fallback font is something that matches any family name. So if the algorithm makes it all the way through the list without finding a match, we want to put the universal match at the bottom, to catch any misses.

We do this using the match type All. There are already some All matches at the end of the list, and to add Lato as the primary fallback, we simply place the object

{
   "target":"lato1",
   "type":"All"
}

towards the bottom of matchPatterns, but before any other match with type All