Custom Font Fallback Value

Ignition Early Access
1

I am working on a a perspective project that will use a custom font and am aware that this font will need to be installed on each computer that launches a client in order for it to display correctly. However, I noticed that it defaults to a font that looks like Times New Roman when the custom font is NOT installed on the client computer. Is there a way to change the fallback font Ignition defaults to when a custom font is not available? Thanks!

2

Actually, there's a few things wrong with that. You actually can add custom fonts, and have them served up by Ignition - drop them into <gateway dir>/data/modules/com.inductiveautomation.perspective/fonts/, in an appropriately titled folder. Then, add a custom <theme>.css file in the themes/ directory, and specify a @font-face directive at the top. That @font-face declaration can declare a fallback, so you can change the behavior from the browser's default (the Times New Roman-alike is probably the browser's fallback serif font if no other font rendering information is specified.

3 Likes
3

We’ve been working on this, we have a URL that works with our custom font. Creating a new theme file (in this case I just copied the light.css and renamed it light-1.css), setting that as the active theme in the designer, and then editing the css to use our custom font still causes Times New Roman to be displayed (Chrome) when the custom font is not installed locally.

@font-face {
  font-family: Emigre; 
  src: url("/data/perspective/fonts/MrEaves-Regular.woff"); }

@font-face {
  font-family: Emigre-bold;
  src: url("/data/perspective/fonts/MrEaves-Bold.woff"); }

The top of the theme css was changed to this (Emigre is the name of our font, and the source url works fine and downloads the .woff file when you manually navigate to it). The only other thing changed in the css is changing every instance of ‘Roboto’ to ‘Emigre’.

Is there something missing here?

4

The two options would be changing ‘Roboto’ to ‘Emigre’ in the theme.css, or try setting the font family to Emigre in a style class. Browser dev tools should be pretty good at telling you what’s going on with font selection/individual component CSS.

1 Like