Import Google Font into project using CSS

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('');

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.

1 Like

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

1 Like

mark this topic as solved please.

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.

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