# Import fonts in a module **URL:** \ **Category:** Module Development\ **Tags:** perspective\ **Created:** [August 8, 2022, 7:36am UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763 "2022-08-08T07:36:13Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\ **Post date:** [August 8, 2022, 7:36am UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763/1 "2022-08-08T07:36:13Z")
Hello, Is it possible to import new fonts in a module ? I would like use a particular font on my perspective components. ---
**Author:** ![Beatriz\_Martinez](https://avatars.discourse-cdn.com/v4/letter/b/e56c9b/32.png) [@Beatriz\_Martinez](https://forum.inductiveautomation.com/u/Beatriz_Martinez)\ **Post date:** [September 19, 2022, 8:41pm UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763/2 "2022-09-19T20:41:01Z")
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` ---
**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\ **Post date:** [September 19, 2022, 10:20pm UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763/3 "2022-09-19T22:20:08Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 20, 2022, 8:05am UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763/4 "2022-09-20T08:05:44Z")
You dont need to create a module to add in fonts. You just add the font to the folder and into the themes ---
**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\ **Post date:** [September 21, 2022, 3:41am UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763/5 "2022-09-21T03:41:20Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7eae500102791a953129231556407e53f102b7b4.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 21, 2022, 7:06am UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763/6 "2022-09-21T07:06:56Z")
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 ```auto @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](https://developers.google.com/fonts/docs/getting_started) 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… ---
**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\ **Post date:** [March 12, 2024, 8:44am UTC](https://forum.inductiveautomation.com/t/import-fonts-in-a-module/62763/7 "2024-03-12T08:44:44Z")
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): ```auto { 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): ```auto 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: ```auto @Override public Optional getMountedResourceFolder() { return Optional.of("mounted"); } @Override public Optional getMountPathAlias() { return Optional.of(AIOToolsComponents.URL_ALIAS); } ``` This will make your files accessible at the following address "[http://gateway/res/yourModuleUrlAlias/](http://gateway/res/yourModuleUrlAlias/)" (e.g., + "fonts/myFont")