Contents x
Uploading Custom Fonts with CSS
  • 04 Jan 2022
  • 1 Minute to read
  • Print
  • Dark
    Light
Contents

Uploading Custom Fonts with CSS

  • Updated on 04 Jan 2022
  • 1 Minute to read
  • Print
  • Dark
    Light
Article Summary

Overview 

Only upload fonts after acquiring the proper valid licenses  
Open source fonts may not require commercial licenses for use, but the same is not true for every font. Do not plagiarize or steal licensed content. Acquire the necessary permission(s) before uploading fonts that are not your own.
If Decisions hosts your server, please contact support@decisions.com for custom font requests.
This article and following tutorial covers self-hosting instances that have access to uploading files in Decisions file paths. Otherwise, the Decisions support team will resolve this.

In addition to the built-in fonts, custom fonts may be uploaded via CSS to perfectly fit any desired aesthetics or branding requirements. Once uploaded, these custom fonts may be implement in Decisions Elements such as Forms, Pages, etc. 


Example

Prerequisite Knowledge
The tutorial assumes familiarity with the following topics:Please review the above articles if needing further instruction.

The following example details how to upload a custom font via CSS into a localhost Decisions instance. To accomplish this, the following setup processes must be completed before utilization.

  1. Ensure the necessary permissions/licenses are acquired to use the desired font. Do not proceed until these are acquired.
  2. Include the necessary CSS font format in the CSS file.
  3. Store the CSS and font's TFF file in the following Decisions server filepath: C:\Program Files\Decisions\Decisions Server\wwwroot\styles\CssDocument
  4. If not automatically added to the internal CSS folder die to step 3, upload the same files internally in the CSS folder via the Add action.

CSS Format

To add a custom font into a CSS file, add the following format to a CSS file:

@font-face{
font-family: 'NameOfFont';
src: url('customfontFolderPath.ttf') format('truetype'),
url('customfontFolderPath.woff2') format('woff2'),
url('customfontFolderPath.woff') format('woff');
}
.className {
font-family: 'NameOfFont';
}

The upcoming example uses the open-source, commercial license-free font Playfair available via Google Fonts. The example follows this format:

font-face{
font-family: 'Playfair_Display';
src: url('PlayfairDisplay-Regular.ttf') format('truetype'),
}
.className {
font-family: 'Playfair_Display';
}

Store to Filepath

Unless altered during installation, Decisions' server files save into C:\Program Files. Wherever the Decisions server resides in a machine, navigate to Decisions\Decisions Server\wwwroot\styles\CssDocuments. This folder is populated with CSS files for use in Decisions. 

Save the custom font CSS along with the font's TFF file here as shown below. It will now automatically appear internally in the Decisions server's CSS folder.

Utilizing the Custom Font CSS

Once the prior setup processes are completed, Designers may select the custom font CSS in Forms, Pages, etc.

The following example applies this to the Label control in a Form.


Was this article helpful?
What's Next
Decisions
Resources
Organization
Connect