cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to add external font style in Thingworx studio

Marble

How to add external font style in Thingworx studio

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

2 REPLIES 2
Highlighted

Re: How to add external font style in Thingworx studio

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

  

  1. 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;}

  2. Define a CSS Class that uses this font:

    .custom-title {
    font-size: 25px;
    font-family:'Archer Book';
    }

  3. In your label widget, refer to the CSS Class:

    Untitled.png

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

 

 

Tags (3)

Re: How to add external font style in Thingworx studio

You can do this through CSS.

 

  1. 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;}

  2. Create a style definition that calls this font:

    .custom-title {
    font-size: 25px;
    font-family:'Montserrat';
    }


  3. Create your label and use the previously defined style:

    Untitled.png

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

Tags (3)