# How to embed custom fonts in perspective client **URL:** \ **Category:** Ignition Early Access\ **Created:** [September 27, 2019, 3:44am UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609 "2019-09-27T03:44:11Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [September 27, 2019, 3:44am UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/1 "2019-09-27T03:44:11Z")
Hello I use some fonts in my perspective project to create a stylish design. Unfortunately when I open perspective in any other devices like Android or iPhone the font is change by the default font. It seems perspective doesn’t embed the font. Installing font on PC is easy for each client but it’s not easy task to install it on phone OS. Is it possible some how embed the font in perspective client or install the font by python script for phones at startup? ---
**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 27, 2019, 3:26pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/2 "2019-09-27T15:26:02Z")
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 `/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: ```auto @font-face { font-family: Test; src: url("/data/perspective/fonts/almendra-sc-v10-latin-regular.woff"); } ``` You should use a new, custom .CSS file, because the `light` and `dark` theme.css files can and will be overwritten on upgrade, as we make changes to the themes and add new components. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5f906c1988ff8581d0500eb113ffb245b20f1516.png) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [September 27, 2019, 6:35pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/3 "2019-09-27T18:35:03Z")
Thanks Paul. That’s great. All my font is a single file \*.ttf, but as I see the font folder, each font there are folder with a lot of font type eot, svg, woff… Should I only use woff type or I can use single ttf type as well? ---
**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 27, 2019, 7:15pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/4 "2019-09-27T19:15:39Z")
TTF should be supported, yes - the different file formats have different compatibility constraints, so we include to maximize compatibility: [https://caniuse.com/#feat=ttf](https://caniuse.com/#feat=ttf) [https://caniuse.com/#feat=woff](https://caniuse.com/#feat=woff) [https://caniuse.com/#feat=woff2](https://caniuse.com/#feat=woff2) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [September 27, 2019, 7:36pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/5 "2019-09-27T19:36:07Z")
So in this case when I backup & restore gateway I have to copy my case file manually watch time? Isn’t it better to have some interface in desinger so user add font in project and ignition add this line automatically in case file. A other way each time user use new font family in style perspective add those in css file automatically. ---
**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 27, 2019, 7:45pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/6 "2019-09-27T19:45:38Z")
The contents of the perspective folder (fonts, themes, styles) _will_ be maintained in a gateway backup - it’s just that, on an upgrade, we _may_ replace the defaults (ie, `light.css` and `dark.css`) with new versions, because we _have to_, because we’re constantly adding new components. You can just copy the existing css file, add your custom font rule to the top, and use it as if nothing changed. While we do have some vague plans to make themes more accessible at some point, but it’s fairly low on the road map. As came up a few times at ICC - our development motto is unofficially “first make it possible, then make it easy”. Right now, custom fonts and theming is _possible_ - but we’re aware that it’s not _easy_. As for automatically detecting fonts in styles - that’s just not practical (or, potentially, possible). What _may_ happen is some kind of “font upload” tool that lets you add resources, and then they’ll be automatically kept updated. But, for now, the solution with manually creating themes is the “right” way to do things (and certainly supported, since it’s literally how we’re doing things as well). ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [September 28, 2019, 7:02pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/7 "2019-09-28T19:02:24Z")
Hi Paul I put font on .\Ignition\data\modules\com.inductiveautomation.perspective\fonts root directory as you told and it works. But I want to organised my fonts so I create a folder(barlow) inside font folder and put my font on it as I show below: I correctly reference my font: > @font-face { > font-family: Barlow; > src: url("/data/perspective/fonts/Barlow/BarlowCondensed-Light.ttf"); } but this is not working. Could you tell me where did I wrong? ![css](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5a1ae707ba46445ca7f8c482657ed72d81466b1a.png) ---
**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 30, 2019, 3:54pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/8 "2019-09-30T15:54:38Z")
Do you have any errors from perspective.FontParser in the gateway logs? Also, are you on 8.0.4? There are a couple of issues with the automatic font registration that I fixed in 8.0.4. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [September 30, 2019, 5:15pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/9 "2019-09-30T17:15:10Z")
No there is no error. I use 8.0.5. ---
**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 30, 2019, 7:25pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/10 "2019-09-30T19:25:42Z")
Then I’m not sure what’s going wrong. I would get in contact with support. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [October 1, 2019, 5:56am UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/11 "2019-10-01T05:56:24Z")
Thanks. Did you test this kind of setup? I mean putting each font family inside a folder in font folder. If not please try it and see if it works for you or not. ---
**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:** [October 1, 2019, 3:10pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/12 "2019-10-01T15:10:45Z")
Yes, I tested it myself above, and, as mentioned, this is literally the exact mechanism _we’re_ using - the Roboto font the light theme defaults to _is_ the Roboto font that’s on disk. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 5, 2019, 5:14pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/13 "2019-11-05T17:14:00Z")
Hi Paul This time I install 8.0.6 RC1 and did following: create a folder called Seven in fonts directory: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9d97aa4fb77e9f124989c32431af315f84b833b5.png) put my font in that: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9a2026cf070817a4c0eaae7f9959fc0a4f24da85.png) edit light.css file: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/b686ecf6e9d597040b3279e00a2dadff7028d0e7.png) change my font family to Seven: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/d87643c775bf9341063f558674a694b0efcb994c.png) And still no luck to getting work. coul you please test it at your side. I also use other fonts and get same result. [Seven.rar](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/8401111b2ebee07266140fb8652b9883bdfaca9c.rar) (8.1 KB) ---
**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:** [November 6, 2019, 12:40am UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/14 "2019-11-06T00:40:25Z")
I wasn’t able to download your .rar file, but I think you need to make two changes: 1. Change the .ttf file on disk to `Seven-regular.ttf` (and update the url in the `@font-face` rule). Our parsing strategy that looks for fonts requires _some_ cue about what “style” a particular file on disk represents; `Seven.ttf` is not a valid filename because it has no style information. 2. Add `@format("truetype")` after the `url()` declaration in `src()`. This shouldn’t be strictly necessary, but helps cue things appropriately for the browser. With a different .ttf file, I was able to get a custom font working following those steps. ```css @font-face { font-family: Seven; src: url("/data/perspective/fonts/Seven-regular.ttf") format("truetype"); } ``` ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 6, 2019, 4:43am UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/15 "2019-11-06T04:43:35Z")
Hi I did exactly as you said but still not working. I upload font on google drive for you. [https://drive.google.com/open?id=1kSZsvB\_rMBHPTPil\_1A1tA1xvASt6uFE](https://drive.google.com/open?id=1kSZsvB_rMBHPTPil_1A1tA1xvASt6uFE) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/98456d5185548172e0b4e631452833034431bb5f.png) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 6, 2019, 5:39am UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/16 "2019-11-06T05:39:20Z")
I did open and close designer and it works!!! By the way I see when I backup whole gateway the ignition/data/modules/com.inductiveautomation.perspective files doesn’t include in backup and i have to recreate all fonts again. This also true for my svg icon liberary in icons folder. Could you please add feature to backup these files. ---
**Author:** ![drojas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drojas/32/3403_2.png) [@drojas](https://forum.inductiveautomation.com/u/drojas)\ **Post date:** [March 25, 2020, 4:36pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/17 "2020-03-25T16:36:42Z")
I replicated all of the same steps shown here (renaming font to include ‘-regular’ and placing inside and outside of the fonts folder, and even copying light.css as a new file and referencing the new theme in perspective) but still did not see my font take effect…even after restarting the gateway and designers. The font is truetype, but how do I know if the font is a “properly packaged web font”? ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [March 25, 2020, 5:31pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/18 "2020-03-25T17:31:35Z")
You should download web fonts type and make a folder name with same name of don’t inside fonts and after that copy those line in top if your light theme css file. If it doesn’t work please check out some other fonts may there is something wrong with don’t itself. ---
**Author:** ![Bart.van.Deurzen](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@Bart.van.Deurzen](https://forum.inductiveautomation.com/u/Bart.van.Deurzen)\ **Post date:** [October 19, 2022, 9:19pm UTC](https://forum.inductiveautomation.com/t/how-to-embed-custom-fonts-in-perspective-client/28609/19 "2022-10-19T21:19:24Z")
Refer to [https://forum.inductiveautomation.com/t/embedding-custom-fronts-in-ignition-perspective/40341](https://forum.inductiveautomation.com/t/embedding-custom-fronts-in-ignition-perspective/40341) for further details on how to get this working.