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

Community Tip - You can change your system assigned username to something more personal in your community settings. X

How to add external font style in Thingworx studio

Desai
11-Garnet

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

1 ACCEPTED SOLUTION

Accepted Solutions

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

View solution in original post

3 REPLIES 3

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

 

 

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

The CSS doesn't seem like working for non administrator users who have only run time permissions. Got any thoughts on this?

Top Tags