Adding Custom Fonts into WebIQ with CSS

[stansonc]

I am attempting to add in a new font of TTF format into the WebIQ environment.

I have uploaded all ttf files into the following font folder:

And have also added a new CSS file and added the importing line to fonts.css

with following codes:

I have then, also restarted WebIQ Developer but yet the option for bosch-office font is still not available in the developer.

Does anyone know if i am missing certain steps here?

BR, Stanson

[webiq-sk]

The font list in WebIQ is hard-coded and will never change when adding custom fonts - you can only use the custom fonts currently in custom CSS.

We are considering (!) adding some kind of font manager, however.

[stansonc]

Thank you, well noted the font manager in the future would be a great addition!

For now would you be able to guide me on the steps via custom CSS?

[webiq-sk · Accepted solution]

The thing you did on your CSS code is defining the fonts, just not using it. This is not a WebIQ question, but a general CSS question.
Just set the fonts the way you want to use them (I don't know, so I can't give specific advice).

Setting all fonts on the page not overridden by IQ styling to BoschOfficeSans:

body {
    font-family:'BoschOfficeSans',Verdana,Arial,Tahoma,sans-serif;
}

Maybe you have to add an !important at the end.

You can find more info online: https://www.w3schools.com/css/css3_fonts.asp 
See the manual on how to create custom CSS: https://www.smart-hmi.com/user/download/deliver/docs/documentation-manual-webiq-designer-2.15-ee64/i... 

[webiq-sk · Accepted solution]

Actually this Bosch page contains sample CSS code and web-compatible fonts:
https://boschddm.com/project/typography/ 

[stansonc]

Thank you for pointing me in the right direction! 😁