Embedding custom Fronts in Ignition Perspective

Ignition
1

I am using some fonts [Montserrat] in my perspective project to create a stylish design and have imported the folder containing the *.ttf files in the location: C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\fonts after this i have given a gateway restart even after that the new fronts are not reflected in the designer.

Is it possible that I am missing some steps?

image
image872×167 8.84 KB

image

2

You are missing a step - you need to create a CSS directive to actually load the required font. The best way to do that is with a custom theme - for more information, consult the readme in the themes/ directory. You can copy the CSS font styles from the existing themes, bringing in Montserrat.

Even if you do that, though, the new fonts will not show up as ‘selectable’ anywhere in the designer. There’s no live-reloading on the Java side of things to bring in the new fonts. Instead, you will just have to create a style class/inline style that selects the appropriate font, and the actual live design session and any client sessions should use it.

If that’s not working, you can check browser dev tools to see whether:

  1. The font is actually being applied in the CSS of the element(s) you’re applying it to
  2. The font is actually being loaded when you first start a session - check the network tab for font loading requests. If you’re getting a 404, you can also try the gateway logs to see if anything is being logged by FontManager or AbstractAssetManager.
1 Like
3

Do you need to change the font.digest.json file at all?

4

I had to get some help from tech support. When creating the Style Class, you need to type the font name in the drop-down box. It will not show up in the drop-down list. Hopefully this will be a future improvement.

5

Hi Pual,

I try to embed Inter font into Perspective and it only works correctly in Runtime but the designer doesn't detect it. I used this method for other fonts and all works even in designer. So I wondered when I did wrong or if it is a bug. Could you see to find out where is the problem?

Here is the CSS:

@font-face {
  font-family: "Inter";
  font-weight: normal;
  src: url("/data/perspective/fonts/Inter-SemiBold.woff"); }
  
@font-face {
  font-family: "Inter"; 
  font-weight: bold;  
  src: url("/data/perspective/fonts/Inter-Medium.woff"); }

Inter.zip (6.4 KB)

6

You should probably contact support. I don't see anything obviously wrong.

1 Like