Import fonts in a module

Hello,
Is it possible to import new fonts in a module ?
I would like use a particular font on my perspective components.

Hi e.sagnelonge,

You are able to import new fonts that can be used in perspective. First you will need to have a .ttf file stored into in font folder.
Font folder located:
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\font

Once that is done, you can reference this font in the fonts.css file that your perspective session is using:
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes

Hi @Beatriz_Martinez, thank’s for your reply,

I’m not sure to understand very well.
According to you I should work as follows:

  • When starting the Gateway Hook, Browse the fonts folder,
  • Make sure my font is present, if not create a copy in the folder,
  • Then make sure it is referenced in a theme created for the occasion ?

Here, my wish is to establish a graphic charter representing my company.
So i would like import this .tff font directly into my module in order to use it from the css files of the web scope.

You dont need to create a module to add in fonts.

You just add the font to the folder and into the themes

I’m sorry, I may express myself badly.

I develop modules for our clients, I’m not looking to create a theme but to customize the components I develop directly in my module.
I already design them using scss, my goal would be to import a font directly into this stylesheet.
Could you tell me where and how to store it ? (in which scope/folder)

Not sure if its good practice to force a different font on a module…

But it should probably be enough to just reference it in your main.scss file

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

Or If its a common used font, you might find it being hosted online though and use an url to import it from there instead of from your folder. Google Fonts API を使ってみる  |  Google Developers

If those dont work you’ll might have to add the font folder to your builder to be included…
That would be in the clients/webpack.config.js file, i think…

1 Like