Help Center
Select Category

Categories

Kurtosys App
System Admin
DXM
Documents
Studio
Data
Communities
Studio for Office

Links

Contact Support
Kurtosys website

Custom Fonts

Style and Design are essential components when creating apps, websites, and documents. Every customer has their own style guide, their own specific look and feel, and often bespoke fonts that are not necessarily readily available on all servers and thus must be included during the creation of the apps or widgets used when creating a website or SFO document.

When using bespoke fonts, it is necessary to create a custom App to host the fonts, create a Theme to reference those fonts, and then reference that Theme in each App requiring the fonts.

 

Note: We recommend the use of True Type Fonts (.ttf).

Table of Contents

Studio Custom App

Fonts can be added to a custom app which is then referenced by other apps needing the Font Family and Styles for a particular project.

  1. In Studio, with the Apps tab selected, click + to create a new app.
  2. The Studio Wizard will open, click Skip Wizard.
  1. Click Custom Application.
  2. Use the dropdown to select FundPress.
  3. Enter a Name for the app.
  4. Enter a Description.
  5. Click Save.
  6. Type in a comment for configuration changes section.
  7. Add a character in the style changes section.
  8. Click Confirm.
  1. Click the Assets tab.
  2. Click Add New Asset.
  1. Click Select File to browse to the folder where the font file is saved.
  2. Double-click on the file, or select then click Open.
Note: Multiple files must be added and uploaded individually.
  1. Click Upload.
  2. Repeat steps 12 to 15 as necessary.
  3. Click Save.
  1. Enter a comment, then click Confirm.
  2. Make a note of the APP GUID associated with the Assets app.

Themes

Create Themes to reference the styles added in the Assets App.

  1. Click X to close the Font app.
  2. Click Themes, then click + to add a new theme.
  1. Enter a Name and Description for the theme.
  2. Use the dropdown to select Kurtosys Default.
  3. Click Save.
  4. Enter a comment, then click Confirm.

Define the Fonts

  1. Click on the theme you created.
  2. Click Add Element+.
  1. Select Font Faces, then click Save.
  2. Click Font Faces.
  1. Click Add Row+.
  2. Click 1.No Label.
  1. Enter the font file name in the Font Family field exactly as per the file name added to the Assets app. (The following steps will need to be repeated for each font file.)
  2. Click +Create Src*.
  3. Click Add Row+.
  1. Click 1.No Label.
  2. In the URL field, enter the api address for the app (this can be found with the APP GUID on the Assets app Application tab), followed by the APP GUID, followed by / followed by the font file name, e.g. https://api-uk or us or eu.kurtosys.app/applicationManager/apps/b730e09a-0705-432f-91b4-989d59ec97ed/DMSans-Regular.ttf
  3. Browse back to Font Faces, then repeat steps 5 to 11 for each font file.
 
Note: Instead of using the UI for steps 4 to 11, you can switch to JSON (<>) view, and copy and paste the reusable JSON snippet below into the appropriate space between curly brackets. Remember to use your selected Font Family name instead of DM Sans Regular and the applicable api and guid.
     "fontFaces": [
    {
      "fontFamily": "DM Sans Regular",
      "src": [
        {
          "url": "https://api-rel.kurtosys.app/applicationManager/apps/YOUR GUID/DMSans-Regular.ttf"
        }
      ]
    },
    {
      "fontFamily": "DMSans Italic",
      "src": [
        {
          "url": "https://api-rel.kurtosys.app/applicationManager/apps/YOUR GUID/DMSans-Italic.ttf"
        }
      ]
    },
    {
      "fontFamily": "DM Sans Bold",
      "src": [
        {
          "url": "https://api-rel.kurtosys.app/applicationManager/apps/YOUR GUID/DMSans-Bold.ttf"
        }
      ]
    }
  ]
}
  1. Click Save.
  2. Enter a comment, then click Confirm.

Apply Fonts to Elements

  1. Browse back to Root, click Add Element+.
  2. Add elements to match the configuration elements for apps used in the instance, e.g. Base, Charting, etc., then click Save.
  1. Click Base.
  2. Click Add Element+.
  1. Select Card, then click Save.
  2. Click Card.
  1. Click Add Element+.
  2. Scroll or search to select Font, then click Save.
  1. Click Font.
  2. Click Add Element+.
  1. Select Family, then click Save.
  2. In the Family field, enter the name you used for the Font Family when creating the Font Face, followed by a comma, and a fallback font in case your selected font is not available.
 
Note: Instead of using the UI for steps 9 to 12, you can switch to JSON (<>) view, and copy and paste the reusable JSON snippet below into the appropriate space between curly brackets. Remember to use your selected Font Family name instead of DM Sans Regular in the example.
    "font": {
        "family": "DM Sans Regular, sans-serif"
      }
  1. Follow the same procedure for Charting.
  2. Select any applicable Chart types. Add the Font | Family.
  3. Click Save. 
  4. Enter a comment, then click Confirm.

Applying a Theme to an App

  1. Open or create an app that will use the theme you have created, e.g. a Bar Chart App.
  2. The Bar Chart will be visible in the preview.
  1. Click the inputs icon, then use the dropdown to select the appropriate theme.
  2. Click preview to see the app updated with the font used in the theme.

Notes:

  • If you are using Themes for SFO, ensure you check Embed fonts in the file in Preferences/Settings for both Word and PowerPoint so as to get fonts producing correctly in PDFs.
  • If you are styling apps for documents and websites, it is best to have 2 separate themes, one for website styles, one for document styles.
  • We recommend using point (pt) sizes for fonts for documents and pixels (px) for fonts for websites.

©2023 Kurtosys Systems

Youtube Linkedin Github