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

Custom Font using CSS Solved

Regular Member

Custom Font using CSS Solved

Hey Guys

I was struggling for a very long time to use a custom font in Thingworx that will be used by all the widgets, texts and labels and have finally gotten it right, and thought I would share.

 

The first step would be to add your custom fonts to a repository in on the thingworx server.

1. Add a fileupload widget to a mashup.

2. Set the RepositoryName property to SystemRepository

3. Set the Path property to /Fonts/

4. Now run the Mashup and choose your font file on your computer and click the "Upload" button to save the file in the repository. (I have done it with both ttf and woff files"

5. In thingworx composer, select the mashup or master mashup of your project. Navigate to the "Custom CSS" tab.

6. In the CSS, paste the following CSS and click save

      

@font-face {
font-family: THENAMEOFYOURFONT;
src: url(/Thingworx/FileRepositories/SystemRepository/Fonts/THEFONTFILE.ttf) format('truetype');
}

*{
font-family: 'THENAMEOFYOURFONT', sans-serif;
font-size:18px !important;

}

 

Replace the "THENAMEOFYOURFONT" with any name you would like to name your font.

Replace the THEFONTFILE with the actual file name of the font file you saved in the repository.

 

Once this is done, your elements will now all use your own specified font. If you place this in the custom CSS of your Master pages, all the mashups that use the master will also inherit it.

 

Hope this helps.

 

Anco

 

 

1 REPLY 1

Re: Custom Font using CSS Solved

Hi @apretorius.

 

Thank you for sharing this information on the community.  Your participation is greatly appreciated.

 

Regards.

 

--Sharon