When creating a Player or Website release, you can customize the fonts used in the published project. To select custom fonts for a release, navigate to the "Publishing" panel of the release edit view, then click the "Edit" (pencil) icon for the active template displayed in the right column.
Among the configurable template options are four separate font selections:
- Interface Font: Used for functional user-interface elements, such as buttons and labels. We recommend using a sans-serif typeface with good legibility when displayed at small sizes.
- Heading Font: Used for headings and titles, and generally displayed at larger sizes.
- Body Text Font: Used for longer text blocks, such as the main body content of articles and pages.
- Caption Font: Used for captions and descriptions, and generally displayed at smaller sizes.
Currently, the Platform supports fonts from three different sources.
Google Fonts
Google Fonts is a library of nearly 1,000 free and open source fonts, hosted by Google and optimized for use on the web. Visit fonts.google.com to browse the full collection.
To use Google Fonts with the Platform, simply set the "Source" field to "Google" and select your desired font.
Please note that the "Font Family" drop-down menu contains, by default, the 50 most popular fonts. To access additional font choices, place the cursor inside the Font Family input and begin typing the name of your desired font — the menu options will update to include fonts matching the text entered.
Typekit Fonts
Typekit (now part of Adobe Fonts) is another service that provides hosted fonts for use with web-based projects. A subscription to Adobe's Creative Cloud service is required to access Typekit fonts.
To use Typekit fonts with the Platform, first follow Adobe's instructions to create a web project containing your chosen fonts. Make a note of the resulting "Project ID."
Back in the Platform, set the font "Source" field to "Typekit." In the "Kit ID" field that appears, enter your Adobe Fonts Web Project ID. When a valid ID is entered, the "Font Family" menu should become enabled and load the font families contained in your project. Select a family from the list of available options.
Local Fonts
Lastly, the Platform supports an option to use "local" fonts. Unlike fonts provided by Google or Typekit, local fonts are not actually served to end users when they view your published project. Instead, the availability of the font depends on it being installed locally on the user's computer. For this reason, the options are limited to a small number of fonts considered "web-safe," on account of their being installed by default on a large proportion of consumer devices.
Historically, this is how all fonts on the web used to work before the features necessary for hosted fonts were widely supported by major web browsers.
To use local fonts with the Platform, set the "Source" field to "Local" and select your desired font.
Adjusting Scale
Because different typefaces have different properties, you may find that a particular font selection appears either too large or too small in the context it appears within your release. In this case, adjust the "Scale" setting up or down to compensate, using the release "Preview" function to review until you are satisfied with the resulting display.
Whenever you change a "Font Family" setting in the Template Options form, the corresponding "Scale" setting automatically adjusts to the Platform's best guess value for that font. However, you may wish to override this value in order to fine tune the appearance of your project.