# Custom Font Fallback Value

**URL:** <https://forum.inductiveautomation.com/t/custom-font-fallback-value/27976>\
**Category:** Ignition Early Access\
**Created:** [September 3, 2019, 4:48pm UTC](https://forum.inductiveautomation.com/t/custom-font-fallback-value/27976 "2019-09-03T16:48:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [September 3, 2019, 4:48pm UTC](https://forum.inductiveautomation.com/t/custom-font-fallback-value/27976/1 "2019-09-03T16:48:28Z")

</div>

I am working on a a perspective project that will use a custom font and am aware that this font will need to be installed on each computer that launches a client in order for it to display correctly. However, I noticed that it defaults to a font that looks like Times New Roman when the custom font is NOT installed on the client computer. Is there a way to change the fallback font Ignition defaults to when a custom font is not available? Thanks!

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [September 3, 2019, 5:00pm UTC](https://forum.inductiveautomation.com/t/custom-font-fallback-value/27976/2 "2019-09-03T17:00:25Z")

</div>

> [@swolnisty](#):
>
> pective project that will use a custom font and am aware that this font will need to be installed on each computer that launches a client in order for it to display correctly. However, I noticed that it defaults to a font that looks like Times New Roman when the custom font is NOT installed on the client computer.

Actually, there's a few things wrong with that. You actually _can_ add custom fonts, and have them served up by Ignition - drop them into `<gateway dir>/data/modules/com.inductiveautomation.perspective/fonts/`, in an appropriately titled folder. Then, add a custom `<theme>.css` file in the `themes/` directory, and specify a `@font-face` directive at the top. That `@font-face` declaration can [declare a fallback](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face), so you can change the behavior from the browser's default (the Times New Roman-alike is probably the browser's fallback serif font if no other font rendering information is specified.

---

<div class="post-metadata">

**Author:** ![bzink1](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@bzink1](https://forum.inductiveautomation.com/u/bzink1)\
**Post date:** [September 3, 2019, 8:52pm UTC](https://forum.inductiveautomation.com/t/custom-font-fallback-value/27976/3 "2019-09-03T20:52:21Z")

</div>

We’ve been working on this, we have a URL that works with our custom font. Creating a new theme file (in this case I just copied the light.css and renamed it light-1.css), setting that as the active theme in the designer, and then editing the css to use our custom font still causes Times New Roman to be displayed (Chrome) when the custom font is not installed locally.

```auto
@font-face {
  font-family: Emigre; 
  src: url("/data/perspective/fonts/MrEaves-Regular.woff"); }

@font-face {
  font-family: Emigre-bold;
  src: url("/data/perspective/fonts/MrEaves-Bold.woff"); }

```

The top of the theme css was changed to this (Emigre is the name of our font, and the source url works fine and downloads the .woff file when you manually navigate to it). The only other thing changed in the css is changing every instance of ‘Roboto’ to ‘Emigre’.

Is there something missing here?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [September 3, 2019, 9:01pm UTC](https://forum.inductiveautomation.com/t/custom-font-fallback-value/27976/4 "2019-09-03T21:01:35Z")

</div>

The two options would be changing ‘Roboto’ to ‘Emigre’ in the theme.css, or try setting the font family to `Emigre` in a style class. Browser dev tools should be pretty good at telling you what’s going on with font selection/individual component CSS.