# Import Google Font into project using CSS

**URL:** <https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144>\
**Category:** Ignition\
**Tags:** ignition80\
**Created:** [June 24, 2021, 5:18am UTC](https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144 "2021-06-24T05:18:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ToMakPo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tomakpo/32/23875_2.png) [@ToMakPo](https://forum.inductiveautomation.com/u/ToMakPo)\
**Post date:** [June 24, 2021, 5:18am UTC](https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144/1 "2021-06-24T05:18:45Z")

</div>

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:

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

```

The `fonts.css` file has the following code:

```auto
@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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 24, 2021, 11:13am UTC](https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144/2 "2021-06-24T11:13:25Z")

</div>

> [@How to embed custom fonts in perspective client](http://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/2):
>
> 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…

---

<div class="post-metadata">

**Author:** ![ToMakPo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tomakpo/32/23875_2.png) [@ToMakPo](https://forum.inductiveautomation.com/u/ToMakPo)\
**Post date:** [June 24, 2021, 7:59pm UTC](https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144/3 "2021-06-24T19:59:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 25, 2021, 7:34am UTC](https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144/4 "2021-06-25T07:34:23Z")

</div>

np,  
mark this topic as solved please.

---

<div class="post-metadata">

**Author:** ![Otavio\_Jesus](https://avatars.discourse-cdn.com/v4/letter/o/b782af/32.png) [@Otavio\_Jesus](https://forum.inductiveautomation.com/u/Otavio_Jesus)\
**Post date:** [May 24, 2023, 4:10pm UTC](https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144/5 "2023-05-24T16:10:20Z")

</div>

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.

 ![Directory](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/60342662882b27c5670fa214fb128997e5ee6d08.png)

 ![Windows_Fonts](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/d/bd09744982f1892b3a174463d67a08ba9b49c30c.png)

 ![FontCSS](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/8/381fb7d2ebda03b02ad1ebc88a8ede4703c9f533.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 25, 2023, 6:23am UTC](https://forum.inductiveautomation.com/t/import-google-font-into-project-using-css/48144/6 "2023-05-25T06:23:54Z")

</div>

> [@How to embed custom fonts in perspective client](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/2):
>
> You should use a new, custom .CSS file,

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