How to add external font style in Thingworx studio

Question

Hi,
How do I add external font style to the widget Text in Thingworx studio.
 
I have tried this:
font-family: Montserrat; src: url(#{resources}/Uploaded/Montserrat-Light.otf);
 
But it is not working.
 
Thanks,
Desai

AllanThompson · Accepted Answer

You can do this through CSS.

In the Project Panel on the left side of the screen, go to Styles > Application and add in the call to use the font:

@font-face { font-family: 'Montserrat'; src: url('#{$resources}/Uploaded/Montserrat-Light.otf') format('otf'); font-weight: normal; font-style: normal;}
Create a style definition that calls this font:

.custom-title {
font-size: 25px;
font-family:'Montserrat';
}
Create your label and use the previously defined style:

If your font is available on-line, then you don't need to upload the font as a resource. Just change the source URL in the CSS definition to point to the on-line copy.

Hope this helps.

Allan

AllanThompson · Answer

Yes, you can reference your font through a CSS Style definition. I've tried it with a WOFF font and it works fine.

In the Styles > Application setting for the Project (in the panel of the left side of the screen) add in your font definition where you refer to the font source online:

@font-face { font-family: 'Archer Book'; src: url('#{$resources}/Uploaded/Archer-Book-Pro.woff') format('woff'); font-weight: normal; font-style: normal;}
Define a CSS Class that uses this font:

.custom-title {
font-size: 25px;
font-family:'Archer Book';
}
In your label widget, refer to the CSS Class:

Now your label will use the font.

If the font is available on-line, then you don't even need to upload the font as a resource. Just change the URL in the CSS definition to point to the online version.

Hope this helps.

Allan

Sign up

Please use your PTC eSupport account.

Welcome to the PTC Community

Please use your PTC eSupport account.

Scanning file for viruses.

This file cannot be downloaded