Hello
I use some fonts in my perspective project to create a stylish design.
Unfortunately when I open perspective in any other devices like Android or iPhone the font is change by the default font.
It seems perspective doesn’t embed the font.
Installing font on PC is easy for each client but it’s not easy task to install it on phone OS.
Is it possible some how embed the font in perspective client or install the font by python script for phones at startup?
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.
Thanks Paul. That’s great.
All my font is a single file *.ttf, but as I see the font folder, each font there are folder with a lot of font type eot, svg, woff…
Should I only use woff type or I can use single ttf type as well?
TTF should be supported, yes - the different file formats have different compatibility constraints, so we include to maximize compatibility:
https://caniuse.com/#feat=ttf
https://caniuse.com/#feat=woff
https://caniuse.com/#feat=woff2
So in this case when I backup & restore gateway I have to copy my case file manually watch time?
Isn’t it better to have some interface in desinger so user add font in project and ignition add this line automatically in case file.
A other way each time user use new font family in style perspective add those in css file automatically.
The contents of the perspective folder (fonts, themes, styles) will be maintained in a gateway backup - it’s just that, on an upgrade, we may replace the defaults (ie, light.css and dark.css) with new versions, because we have to, because we’re constantly adding new components. You can just copy the existing css file, add your custom font rule to the top, and use it as if nothing changed.
While we do have some vague plans to make themes more accessible at some point, but it’s fairly low on the road map. As came up a few times at ICC - our development motto is unofficially “first make it possible, then make it easy”. Right now, custom fonts and theming is possible - but we’re aware that it’s not easy.
As for automatically detecting fonts in styles - that’s just not practical (or, potentially, possible). What may happen is some kind of “font upload” tool that lets you add resources, and then they’ll be automatically kept updated. But, for now, the solution with manually creating themes is the “right” way to do things (and certainly supported, since it’s literally how we’re doing things as well).
Hi Paul
I put font on .\Ignition\data\modules\com.inductiveautomation.perspective\fonts root directory as you told and it works.
But I want to organised my fonts so I create a folder(barlow) inside font folder and put my font on it as I show below:
I correctly reference my font:
@font-face {
font-family: Barlow;
src: url("/data/perspective/fonts/Barlow/BarlowCondensed-Light.ttf"); }
but this is not working. Could you tell me where did I wrong?
Do you have any errors from perspective.FontParser in the gateway logs?
Also, are you on 8.0.4? There are a couple of issues with the automatic font registration that I fixed in 8.0.4.
No there is no error. I use 8.0.5.
Then I’m not sure what’s going wrong. I would get in contact with support.
Thanks.
Did you test this kind of setup? I mean putting each font family inside a folder in font folder.
If not please try it and see if it works for you or not.
Yes, I tested it myself above, and, as mentioned, this is literally the exact mechanism we’re using - the Roboto font the light theme defaults to is the Roboto font that’s on disk.
Hi Paul
This time I install 8.0.6 RC1 and did following:
create a folder called Seven in fonts directory:
put my font in that:
edit light.css file:
change my font family to Seven:
And still no luck to getting work. coul you please test it at your side. I also use other fonts and get same result.
Seven.rar (8.1 KB)
I wasn’t able to download your .rar file, but I think you need to make two changes:
Seven-regular.ttf (and update the url in the @font-face rule). Our parsing strategy that looks for fonts requires some cue about what “style” a particular file on disk represents; Seven.ttf is not a valid filename because it has no style information.@format("truetype") after the url() declaration in src(). This shouldn’t be strictly necessary, but helps cue things appropriately for the browser.@font-face {
font-family: Seven;
src: url("/data/perspective/fonts/Seven-regular.ttf") format("truetype");
}
Hi
I did exactly as you said but still not working. I upload font on google drive for you.
https://drive.google.com/open?id=1kSZsvB_rMBHPTPil_1A1tA1xvASt6uFE
I did open and close designer and it works!!!
By the way I see when I backup whole gateway the ignition/data/modules/com.inductiveautomation.perspective files doesn’t include in backup and i have to recreate all fonts again.
This also true for my svg icon liberary in icons folder.
Could you please add feature to backup these files.
I replicated all of the same steps shown here (renaming font to include ‘-regular’ and placing inside and outside of the fonts folder, and even copying light.css as a new file and referencing the new theme in perspective) but still did not see my font take effect…even after restarting the gateway and designers. The font is truetype, but how do I know if the font is a “properly packaged web font”?
You should download web fonts type and make a folder name with same name of don’t inside fonts and after that copy those line in top if your light theme css file.
If it doesn’t work please check out some other fonts may there is something wrong with don’t itself.
Refer to https://forum.inductiveautomation.com/t/embedding-custom-fronts-in-ignition-perspective/40341 for further details on how to get this working.
