Import Google Font into project using CSS

[ToMakPo]

I’m trying to import google fonts into my project but it’s not quite working the way I would expect. I have an index.css file that points to a number of other files and I’ve tested it and the index file works. In the index file, I am pointing to the fonts.css file and as far as I can tell, that all checks out the way it should. I don’t think the issue is a pathing issue.

The fonts.css file has this path:

C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\myThemes\fonts

The fonts.css file has the following code:

@font-face {
    font-family: "Kirang Haerang";
    src: url('https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap');
}

Then in the project, I put Kirang Haerang for fontFamily, but noting changes.

I’ve also tried downloading the actual font and having the src point to that instead, but it also doesn’t work.

What am I doing wrong.

[victordcq]

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: Tes…

[ToMakPo]

Thanks. I moved the font to the font folder and it worked.

[victordcq]

np,
mark this topic as solved please.

[Otavio_Jesus]

Hello Guys:

I had this same problem, but it didn't work for me

I followed the steps below

• I put a folder with ".tff" files in the /data/modules/com.inductiveautomation.perspective/fonts directory
• I include the new font in the "font.css"

Another step I've done is to include the sources in the window, but with no results.

When I started the project the text object continues with another font.

[victordcq]

@How to embed custom fonts in perspective client

You should use a new, custom .CSS file,

also
inspecting the browser to see the loaded css file might give some clues