# \[Tutorial\] How to import custom fonts into Perspective

**URL:** <https://forum.inductiveautomation.com/t/tutorial-how-to-import-custom-fonts-into-perspective/94623>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [August 14, 2024, 12:24am UTC](https://forum.inductiveautomation.com/t/tutorial-how-to-import-custom-fonts-into-perspective/94623 "2024-08-14T00:24:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![flexware](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/flexware/32/66243_2.png) [@flexware](https://forum.inductiveautomation.com/u/flexware)\
**Post date:** [August 14, 2024, 12:24am UTC](https://forum.inductiveautomation.com/t/tutorial-how-to-import-custom-fonts-into-perspective/94623/1 "2024-08-14T00:24:44Z")

</div>

Hi everyone! 👋

There have been many questions and answers on this topic in the Forums, but I wanted to create a ~~quick~~ write-up on how to generally import custom fonts into Ignition to be used within Perspective - hopefully people besides future me also find this helpful!

**Disclaimer:** this may not work for all fonts (especially custom, licensed font packages). I will be using the popular `Poppins` font as an example, but I believe the process will be similar if not the same for other font families.

### Step 1: Find a font

This is an obvious preliminary step - you can't import a font you haven't found yet. What I usually use is an open-source repository like [Google Fonts](https://fonts.google.com/). This is where I will download the `Poppins` font resource from - [here](https://fonts.google.com/specimen/Poppins) is a link if you want to follow along.

### Step 2: Download the font

Once you find one or more fonts that you like, click on the font you desire to import and click on the **`Get font`** button in the upper-right corner. This will add the font resource to a "cart", since you can presumably download many fonts all at once.

> **Picture**
>
> ![image.png](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1b815a8a24f9126d05f4df16f0db9e1e3f2ce054.png)

Then, click the **`Download all`** button.

> **Picture**
>
> ![image.png](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/87266d16b9bce6d432bdd4103a858753208c8ce9.png)

Click on your browser's `Downloads` location to open the font archive.

 ![Browser download](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7b7a797e6bd0f52415e0bf3557f9b9fba159ad26.png)

This is what the archive looks like, if you open it.

 ![Contents of the Poppins archive](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/dd3afbbdd69dadbbf854a0f9173de6c9851770c3.png)

### Step 3: Read and understand the font license

If you download a font from `fonts.google.com`, you will likely have an `OFL.txt` file in the archive. This file will contain any license agreements that may come with the particular font resource you downloaded and it should not be removed from the font directory (in my opinion - also that is explicitly what the license calls for).

### Step 4: Create a top-level font folder in Ignition's installation directory

I'll create a `Poppins` folder in the default Ignition installation location, in the `fonts` folder. Obviously, if you downloaded the `Fira Sans` font instead of `Poppins`, for example, create a `FiraSans` directory (the `Noto Sans` font also has a space in its name and IA removed it, so we will follow that guideline for a font that has one or more spaces in its name, like `Fira Sans` or even `IBM Plex Sans`).

> **Default Windows installation location**
>
> C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\fonts

 ![Create a new folder](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/16bd6d67a6b5e5f048df4308a7d14167411c6f64.png)

After you create a new folder inside of `fonts` (as seen in the snip above), you'll want to extract, copy and paste the contents of downloaded folder - if you downloaded the `Poppins` font, it should look like this:

 ![Contents of /fonts/Poppins](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0b050751288db6827a67f40dad52dfae4f29610e.png)

### Step 5: Create a new folder and a `fonts.css` file

If you read the `README.md` file in the `\themes` directory, you'll notice an important comment - any changes made to the `light` and `dark` **folders** (not the `light.css` or the `dark.css` **files** ) will be overwritten on upgrade, so we don't want to place any new `css` files into those directories. Ideally, if you want to use a custom font, you'll also have a custom theme, but this is not a requirement. Another way you can do this is to just modify the `light.css` file directly and add your `@font-face` declarations there, but that seems like a bad practice to me.

Create a new folder in the `\themes` directory that will correspond to your future custom theme (if you don't have one already) or a directory that can store separate or disjoint `css` files. Again, this is an organizational step, only applicable to those who want a custom font without also creating a custom theme (again - this is just one of the many ways to do this).

 ![A custom theme for a stealth corporation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/4/04bc7c898999f8fcdb3feadd43509cf2b5bc0ad8.png)

Next, we will create a `css` file inside your custom theme directory - because we will use one `css` file for all of the custom fonts we may add, I'll call it something generic, like `fonts.css`. Here is what that looks like:

 ![Generic file for custom fonts](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/4094d0f8379315dfd163c6eec02562b773b8236e.png)

ℹ If you have trouble creating a file in this directory because of permission issues, create the file or folder in a different directory, such as on the Desktop, then cut it into the `\themes` location.

### Step 6: Add @font-face declarations

Copy the following code into the `fonts.css` file you created above (in my case, `\themes\brawndo\fonts.css`):

> **Sample file contents**
>
> ```css
> @font-face {
> font-family: "Poppins";
> font-weight: 100;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-Thin.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 200;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-ExtraLight.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 300;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-Light.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 400;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-Regular.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 500;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-Medium.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 600;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-SemiBold.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 700;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-Bold.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 800;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-ExtraBold.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 900;
> font-style: normal;
> src: url('/data/perspective/fonts/Poppins-Black.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 100;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-ThinItalic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 200;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 300;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-LightItalic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 400;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-Italic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 500;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-MediumItalic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 600;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 700;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-BoldItalic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 800;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
> }
> 
> @font-face {
> font-family: "Poppins";
> font-weight: 900;
> font-style: italic;
> src: url('/data/perspective/fonts/Poppins-BlackItalic.ttf') format('truetype');
> }
> 
> ```

ℹ This is specifically for the `Poppins` font family and for the `TrueType` font standard (i.e. `.ttf` extention)! Adjust the contents of that file accordingly - for a reference, check the `\themes\light\fonts.css` file; there are both `.woff` and `.ttf` examples in that file.

> **How to generate above code for any font!**
>
> If you want to generate these file contents based on the font you selected, Google Fonts has an amazing tool called `Get embed code` that will get you 95% of the way there.
> 
> ![Amazing tool](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/2475e535f6c6072f744c20002803d5f0ac4fbab8.png)
> 
> The section you'll want to copy into `fonts.css` is what you find under `Poppins CSS classes` (in my case):
> 
> ![Copy the code](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/c/4c7ef3c018801b794fac567ebbf48b5c5e2087f0.png)
> 
> Paste that code into `fonts.css`. We will need to make some manual changes: instead of using `css` classes, we'll use the `@font-face` at-rule for each font weight, and we will also need to add a `src` property to each font weight (`Poppins` comes with 18 different font weights by default and there is a `.ttf` file for each font weight inside of `\fonts\Poppins`). Implementing these two changes will get you exactly what I have in the "Sample file contents" code snippet above.

### Step 7: Import the `fonts.css` file into `\themes\light.css`

The penultimate step is an easy one: update the `\themes\light.css` file and add an `@import` statement for our new `fonts.css` file.

Contents of `lights.css`:

```css
@import "./light/index.css";
@import "./brawndo/fonts.css";

```

### Step 8: Merge changes from the gateway and test!

You'll want to be sure that the changes you make on the gateway filesystem actually saved to disk - VSCode warns me that any change I make requires admin privileges and `Auto-save` won't work unless you explicitly allow the changes to be saved.

The other thing to be aware of is that the default scan rate by the gateway of the filesystem is 5 minutes. In other words, the gateway can be unaware of the changes you made within the `fonts` and `themes` directories for a time - this is normal.

ℹ If you're on 8.1.28+, you can manually trigger a read using the new `system.project.requestScan` [function](https://docs.inductiveautomation.com/docs/8.1/appendix/scripting-functions/system-project/system-project-requestScan).

If you have a Designer open, be sure to click the `Merge` button to get all the newest gateway changes.

 ![Merge Simpson](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/23dcce4f871458776c0251eb67b5c2da00ca384f.png)

If you have a View open, close it and reopen it after merging changes from the gateway. You should see the new font in the Designer after that!

 ![Woohoo!](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/01d888117bee3fe534c799c346ec82ccbabc78ad.png)

## Troubleshooting 🔧

There are many things that can go wrong. Here are a few things you can use to troubleshoot what doesn't work.

#### 🔔 Always check gateway logs!

Check the logs to see if there are any log messages from the `perspective.ThemeManager` logger. For some reason, when I created the `brawndo` folder, that change didn't register (probably because of the dumb name), so then I kept getting messages like you see below (even though my filesystem showed the correct folder name).  
 ![boo...](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/80f92e4f1edcd5065b4e2b3223b3b6e68e2d46dc.png)

#### 🔔 Check if browser can see your new resources

Navigate to your gateway webpage and check if your browser can download the font file. For instance, if your gateway is at `localhost`, you can use the following test URL:

```plaintext
http://localhost:8088/data/perspective/fonts/Poppins-Thin.ttf

```

This should trigger a download that will show up in your host machine's Downloads folder. If that doesn't happen immediately, that means your filesystem changes either weren't saved or the gateway can't see the new folders and files.

#### 🔔 Check the browser DevTools

The last tip I'll mention when troubleshooting custom fonts is to double-check to make sure the `@import` statement in `light.css` is doing its job. Go to your browser DevTools -\> Sources -\> `themes` -\> `light.css` and make sure the `@font-face` statements for your custom font appear in that file.

 ![Sources tab](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/ae044eae4b4455357afdf7d193594d3462971c75.png)

Another way to check this same thing would be to use the DevTools -\> Network -\> `light.css` file to check for the same thing.

 ![Network tab](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/610303562862312ba4bf5f5ebe761c12b7611408.png)

ℹ Our `@font-face` at-rules appear at the end of the `light.css` file because in our `light.css` file in the gateway filesystem, we import it after importing the `\themes\light\index.css` file.

 ![Almost done...](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/e/becb3f5d9a11dd4e6c968789e0e635cd64a76975.png)  
If we switched the position of those to `@import` statements, our `@font-face` declarations would appear at the very top of `light.css` in the browser's DevTools. Hopefully that makes sense...

### Conclusion

Let me know if this is helpful - I will try to edit it when new information comes to light. I tested this process on 8.1.36, but it's been very similar if not the same for a very long time.

---

<div class="post-metadata">

**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\
**Post date:** [August 14, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/tutorial-how-to-import-custom-fonts-into-perspective/94623/2 "2024-08-14T01:58:35Z")

</div>

Excellent tutorial! Just what I've been looking for.

---

<div class="post-metadata">

**Author:** ![apurva.singhvi](https://avatars.discourse-cdn.com/v4/letter/a/e79b87/32.png) [@apurva.singhvi](https://forum.inductiveautomation.com/u/apurva.singhvi)\
**Post date:** [September 5, 2024, 4:30pm UTC](https://forum.inductiveautomation.com/t/tutorial-how-to-import-custom-fonts-into-perspective/94623/3 "2024-09-05T16:30:59Z")

</div>

Thank you for creating such a helpful tutorial.

---

<div class="post-metadata">

**Author:** ![andrzej.juzwa](https://avatars.discourse-cdn.com/v4/letter/a/a4c791/32.png) [@andrzej.juzwa](https://forum.inductiveautomation.com/u/andrzej.juzwa)\
**Post date:** [June 9, 2025, 7:36pm UTC](https://forum.inductiveautomation.com/t/tutorial-how-to-import-custom-fonts-into-perspective/94623/4 "2025-06-09T19:36:42Z")

</div>

Hello all,

Did anybody try to import custom fonts into Ignition installed on Synology Container ?

---

<div class="post-metadata">

**Author:** ![steveb123](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@steveb123](https://forum.inductiveautomation.com/u/steveb123)\
**Post date:** [October 15, 2025, 3:25pm UTC](https://forum.inductiveautomation.com/t/tutorial-how-to-import-custom-fonts-into-perspective/94623/5 "2025-10-15T15:25:54Z")

</div>

Appears to no longer be valid for 8.3. Things got moved around.