Import fonts in a module

Module Development
1

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

1 Like
2

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

3

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.

4

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

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

5

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)

image
image426Ɨ627 14.1 KB

6

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ā€¦

2 Likes
7

Here's an example for the community:

1 - Store your fonts in a "fonts" folder at the root of the client.
2 - Add the following rule to your module's configuration in webpack.config.js (config->module->rules):

        {
            test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
            type: 'asset/resource'
        }

3 - Adapt the copyToResources function of your webpack to push the fonts into your .jar (add the following code):

const fontsDir = path.resolve(__dirname, "dist/fonts/");
const fontsToCopy = path.resolve(generatedResourcesDir, "fonts");

if (!fs.existsSync(fontsToCopy)){
    fs.mkdirSync(fontsToCopy, {recursive: true})
}

fs.readdirSync(fontsDir).forEach(file => {
    const sourceFile = path.resolve(fontsDir, file);
    const destinationFile = path.resolve(fontsToCopy, file);

    fs.copyFileSync(sourceFile, destinationFile);
    console.log(`copying ${file} into ${destinationFile}...`);
});

4 - Call your fonts in your css/scss or ts.
url(./fonts/glyphicons-halflings-regular.ttf)

Note: You may need to expose your files from your GatewayHook as follows:

@Override
public Optional<String> getMountedResourceFolder() {
    return Optional.of("mounted");
}

@Override
public Optional<String> getMountPathAlias() {
    return Optional.of(AIOToolsComponents.URL_ALIAS);
}

This will make your files accessible at the following address "http://gateway/res/yourModuleUrlAlias/" (e.g., + "fonts/myFont")