How to embed custom fonts in perspective client

Fonts should not be referenced directly like that, relying on system level fonts. The proper way to use fonts in Perspective is to embed them as resources - look at <gateway directory>/data/modules/com.inductiveautomation.perspective/ - there is a fonts/ directory, and a themes/ directory. If you install a properly packaged web font in the fonts/ directory, you can then reference it in a @font-face selector in a new theme.css file; something like this test I did:

@font-face {
  font-family: Test;
  src: url("/data/perspective/fonts/almendra-sc-v10-latin-regular.woff"); }

You should use a new, custom .CSS file, because the light and dark theme.css files can and will be overwritten on upgrade, as we make changes to the themes and add new components.

1 Like