Appian lets you select a custom typeface to use universally across all sites on your instance. This should be used if your company has a style guide that requires a specific typeface.
Custom typefaces for sites are configured in the Administration Console. This page walks through the process for setting up a custom typeface.
Font files must be hosted outside of Appian to use this feature. Files can be hosted at any trusted location. You can consider Google Fonts as a source. If your instance is self-managed, we recommend hosting the files at the same domain as your Appian instance to optimize performance.
This feature can use WOFF 1.0, WOFF 2.0, TTF, or OTF files. WOFF 1.0, TTF, and OTF work on all supported browsers. WOFF 2.0 works on all supported browsers. Either TTF or OTF, but not both, are required for use on Appian Mobile.
WOFF 2.0 offers the best performance and we recommend that you always add these files if they are available. We recommend you add either TTF or OTF files if your users use Appian Mobile.
Font files typically come in nine weights:
Each of these nine weights typically also come in italic and non-italic forms.
Appian only uses four weights:
These are the only four weights we ask for on the configuration screen. If you are configuring the typeface for use on Appian Mobile, you will also be asked to provide the italic version of these four weights. For web browsers, Appian only requires the non-italic font files.
You should also consider the languages that your users will need. There is no standard organization of font files: some fonts provide every unicode character (glyph) for multiple languages in a single file while others split the glyphs across multiple files. English characters are typically found in a file labeled "Latin". The additional accented characters used by non-English Romance languages, such as the é, î, ü, are found in a file labeled "Latin-Extended".
Before you begin setting up the typeface, make sure you have a link to the WOFF 1.0, WOFF 2.0, TTF, and/or OTF font files ready for every language you need to support in the four weights (300, 400, 600, 700) used in Appian and the matching italic files if you are configuring typefaces for mobile.
If a user tries to type or view a glyph that is missing from the font files provided in the Administration Console, the glyph will still render. Depending on the browser and the set of files provided, the glyph will either render in a different weight or in Appian's default typeface: Open Sans on web, Roboto on Android, and San Francisco on iOS.
For example, if a user fills out a form in Arabic but only Latin files were provided, those characters will render in Open Sans. If a user renders bold text but only the Regular (400) weight file was provided, they will most likely see the text using the 400-weight files, possibly with a bold styling applied.
Let's walk through configuring a typeface for web only. For this example, we will set up Roboto Slab in English and Spanish using font files hosted at Google Fonts. We only have three files to use. The URLs for these font files are as follows:
|Weight + Alphabet||WOFF 2.0||WOFF 1.0|
|Latin All Weights||https://fonts.gstatic.com/s/robotoslab/v11/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2||https://fonts.gstatic.com/s/robotoslab/v11/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSmb2Rl.woff|
To add new typefaces and language groups:
Latin. For Name of the second group, enter
To make your typeface active and preview the font:
Now all sites on web are using the Roboto Slab typeface.
Now let's continue the above example and configure a typeface for mobile. We will use URLs that do not evaluate to anything for the example; you should replace the URLs with your own functioning font files.
|Weight + Alphabet||Regular||Italic|
To add these files:
Latinlanguage group, paste the non-italic URLs into the .ttf or .otf URL (Regular) column in the corresponding row for each weight.
Roboto Slabto be the active typeface above, these changes will immediately take effect. To see the new typeface on sites on the Appian Mobile application, log out and back in on the mobile application.
If the typeface is rendering but there are performance issues, ensure that the following are true:
If some glyphs are not appearing in the correct typeface, try these options:
F12on a web browser. See if there are any console errors related to the font files, such as
Failed to decode downloaded font,
Access to the font at [x] from origin [y] has been blocked, or an error originating from the URL that the font files are hosted at. If so:
There is a small set of typefaces that are available on most modern operating systems. These will work on web but not on mobile. These include:
To add an operating system typeface:
If a user's operating system does not have the specified typeface installed on their system, they will see Appian's default Open Sans on web, Roboto on Android, or San Francisco on iOS.