Custom Fonts in 8.3 Beta

[najsel89]

Hi there,

I understand that version 8.3.0 is still in beta, and I appreciate the ongoing work being done. I’ve been trying to get custom fonts working, but I’m running into some trouble and could use a bit of guidance.

I noticed that the documentation provides helpful details on including CSS files in themes, but I couldn’t find any examples specifically related to fonts. Just to make sure I’m on the right track, here’s what I’ve done so far:

1. I created a custom font called “TestFont” using the following HTTP POST request (based on the Postman API collection):

POST /data/api/v1/resources/com.inductiveautomation.perspective/fonts HTTP/1.1
Host: localhost:8088
Content-Type: application/json
Accept: application/json
X-Ignition-API-Token: <GIVEN TOKEN>
Content-Length: 170

[{
  "name": "TestFont",
  "collection": "core",
  "enabled": true,
  "description": "Custom font for branding",
  "config": {},
  "backupConfig": {}
}]

2. This created the folder:
   C:\Program Files\Inductive Automation\Ignition\data\config\resources\core\com.inductiveautomation.perspective\fonts\TestFont

3. I copied the font file TestFont-Regular.woff2 into that folder.

4. I edited the resource file to include the font file in the data section:

5. I ran a “Scan File System” on the gateway.

6. I opened the Designer to check if “TestFont” appeared in the font dropdown, but it didn’t. I also tried manually entering the name, but it still wasn’t recognized.

7. I restarted the gateway, but unfortunately, the font still didn’t show up.

I even repeated steps 1–7 and tried updating the font file using Postman instead of editing the resource manually:

PUT /data/api/v1/resources/datafile/com.inductiveautomation.perspective/fonts/TestFont/TestFont-Regular.woff2?signature=b9aa0590835681b6f23e618323fdbd352d58fc0b57aaffb3e8cbcd211ee9ab69 HTTP/1.1
Host: localhost:8088
Content-Type: */*
Accept: application/json
X-Ignition-API-Token: <GIVEN TOKEN>

Despite all this, I haven’t had any success getting the font to appear. If I’ve missed something or misunderstood a step, I’d really appreciate any clarification or suggestions you might have.

Thanks so much in advance!

[paul-griffith]

After you scanned the file system (under config, not projects, right?) did you get any errors in the gateway logs?
Can you show a screenshot of the current contents of the font resource folder, and the actual contents inside the config.json and resource.json files?

[najsel89]

Hi again! Yes I performed a config scan and not a project scan.

Here is my observations so far:

1. I deleted the old font via the API and then did a gateway restart

2. I created a new font again via the API, called “TestFont”, this attached zip folder was then created under C:\Program Files\Inductive Automation\Ignition\data\config\resources\core\com.inductiveautomation.perspective\fonts

   TestFont_1_BeforeAddingFilename.zip (23.5 KB)

3. I then copied the font file “TestFont-Regular.woff2” manually to C:\Program Files\Inductive Automation\Ignition\data\config\resources\core\com.inductiveautomation.perspective\fonts\TestFont in the file explorer.

4. I then added the filename to “data” in the resource json via the API collection in Postman called “Update Fonts Data File”. This is how the TestFont folder looked like after performing this:

   TestFont_2_AfterAddingFilename.zip (1.3 KB) where I observed that the font file “TestFont-Regular.woff2” changed from 23 KB to 0 KB.

5. I then performed a config scan via the API collection in Postman called “Config Scan Request”, where the result was successfull. I didn’t get any error in the gateway logs.

6. I closed down and reopened ignition designer. Then I opened my project again and I still didn’t get “TestFont” in the font dropdown list.

7. After I observed that the font file went from 23 KB to 0 KB after adding the filename to resource data, I replaced the font file so that it got back to 23 KB. I performed a config scan again without any luck.

8. I even tried to restart the gateway and it didn’t work either.

These font resources are loaded in the web browser (no signs of TestFont):

Are the fonts bound the theme, and if so, do I need to update the theme with the new font?

I hope this will help you troubleshoot my problem.

EDIT: After some investigation I got some stuff to work following these steps:

1. Recreated the font “TestFont” with the API, then I ran “Update Fonts Data File” with the new file “TestFont-Regular.woff2”. It then created an empty “TestFont-Regular.woff2”. I then replaced that with the real one.

2. I ran a config scan

3. I created a new custom font, and added a fonts.css file with the “Update Themes Data Files” and index.css. Included fonts.css in index.css. And updated the fonts.css with the following:
   @font-face {

   font-family: 'TestFont';

   font-weight: normal;

   src: url("/data/perspective/fonts/TestFont.woff2") format("woff2");

   }

4. Ran a config scan again

5. Then I reference TestFont as FontFamlily on a label component and then it worked. So it seems like the fonts needs to be defined in the theme.

But I stumbled on another issue, while creating the files with the “Update Themes Data File”, I cannot create files within a subfolder, for example test/components.css. Why can’t I do this? It feels like I need to have all the css file in plain root of the themes folder.

[paul-griffith]

@najsel89

I then added the filename to “data” in the resource json via the API collection in Postman called “Update Fonts Data File”. This is how the TestFont folder looked like after performing this:

The request body of the "Update X Data File" route is consumed and used as the incoming data file. That is, the purpose of that particular route is to upload a file, not simply to register an existing file. That's why the data file was zeroed out at this point.

@najsel89

Are the fonts bound the theme, and if so, do I need to update the theme with the new font?

Fonts are independent of themes, though if you really need a custom font applied globally a custom theme probably makes the most sense. An option that might be easier for testing purposes, especially in light of my next sentence, would be the Advanced Stylesheet - you do ultimately need a @font-face declaration to be loaded by the page CSS to use your custom font.

@najsel89

But I stumbled on another issue, while creating the files with the “Update Themes Data File”, I cannot create files within a subfolder, for example test/components.css. Why can’t I do this? It feels like I need to have all the css file in plain root of the themes folder.

The storage of themes is actively changing, to address some other bugs. I wouldn't invest too heavily in custom theme work in the RC yet.

[najsel89]

Thanks for the quick response! I have a few questons:

The request body of the "Update X Data File" route is consumed and used as the incoming data file. That is, the purpose of that particular route is to upload a file, not simply to register an existing file. That's why the data file was zeroed out at this point.

So if you’re sayin that it’s “consumed” as the incoming data file, where do I attach the file in the PUT request? This is how it looks now:

PUT /data/api/v1/resources/datafile/com.inductiveautomation.perspective/themes/test/test.index.css?signature=e6aa5ecd6d3bde1b63041fbe1ce30e10933576e9bfac91d368fecee6755e51fb HTTP/1.1
Host: localhost:8088
Content-Type: */*
Accept: application/json
X-Ignition-API-Token: Postman:OQryLM_1JYR8k4oJcwKTEYEQ5z9epXeOE7MMX0W335c

Regarding that the font’s are indendent is clear for me now. It’s just that it seems to rely on the same “Update X Data File” mechanism that is not super clear for me at the moment.

EDIT: I’ve gotten more familiar now with the PUT request and that I add the file as a binary into the body of the request, so with this knowledge I’ve managed to put a new file into the root of the font folder. But I still can’t create subfolders, for example:

# Read the file as binary
file_path = "C:/temp/TestFont-Regular.woff2"
with open(file_path, "rb") as f:
    file_data = f.read()

# Define the URL and headers
url = "http://localhost:8088/data/api/v1/resources/datafile/com.inductiveautomation.perspective/fonts/TestFont/SubFolder/TestFont-Regular2.woff2?signature=8df2d0f8e0d7bc5f53a8ba3dca39f69cd25a05d5594df75a17534f340b4093f9"
headers = {
    "Content-Type": "*/*",  # As specified in Postman
    "Accept": "application/json",
    "X-Ignition-API-Token": "Postman:<my token>"
}

# Send the PUT request with the file as the body
response = system.net.httpPut(url, putData=file_data, headerValues=headers)

# Print the response
print(response)

And I get the following response:

IOError: [Errno 2] File not found - http://localhost:8088/data/api/v1/resources/datafile/com.inductiveautomation.perspective/fonts/TestFont/SubFolder/TestFont-Regular2.woff2?signature=8df2d0f8e0d7bc5f53a8ba3dca39f69cd25a05d5594df75a17534f340b4093f9

The storage of themes is actively changing, to address some other bugs. I wouldn't invest too heavily in custom theme work in the RC yet.

Are you telling me that it’s unnecessary to look in to how to handle custom themes before the stable release and that it’s going to be heavily changed?

[paul-griffith]

@najsel89

Are you telling me that it’s unnecessary to look in to how to handle custom themes before the stable release and that it’s going to be heavily changed?

Basically. I wouldn't worry about getting themes working in whatever format they support right now, because that storage format is changing in some ways - either by final release or in an RC2 if we end up doing one.