---
title: "Uploading Custom Fonts with CSS"
slug: "uploading-custom-fonts-with-css"
updated: 2024-08-23T17:14:37Z
published: 2024-08-23T17:14:37Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Uploading Custom Fonts with CSS

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.

## Overview

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

If Decisions hosts your server, please contact support@decisions.com for custom font requests.This article and the following tutorial cover self-hosting instances that have access to uploading files in Decisions file paths. Otherwise, the Decisions support team will resolve this.

#### Prerequisites

- [Uploading CSS](https://documentation.decisions.com/v9/docs/uploading-css)
- [Using CSS in Forms](https://documentation.decisions.com/v9/docs/using-css-in-forms)

---

## Example

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. Upload the CSS and font's TFF file under `C:\Program Files\Decisions\FileStorage\Primary\styles\css\CssDocuments`.

### CSS Format

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

```css
@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:

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

---

## Utilizing the Custom Font CSS

Once the prior setup processes are completed, Designers may select the custom font CSS in Forms, Pages, etc., then apply the font to desired controls. Please reference the [prerequisite articles](https://documentation.decisions.com/v9/docs/uploading-custom-fonts-with-css#prerequisites) for further information.

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-23_13h10_16.png)![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-23_13h11_53.png)