Web Fonts

Christie Widget Designer Version 6 - Q&A

Moderator: Moderator Group

Forum rules
When asking make sure to include the operating system and the revision of Widget Designer you are using.

Web Fonts

Postby djrappa » Mon Apr 23, 2018 9:08 am

I found an interesting one today...

I have a font used on a bunch of pages that is a custom one (our company's branding)...
When using a web browser on a windows machine that has the font installed all is well.
However when accessing on an ios device in say Safari or Chrome that font doesn't exist so it reverts to something ugly the phone knows.

Is there a way to push the font out to the device along with the page via Widget Designer? Or am I out of luck with this one?

Thanks hive
Cheers
Clint Dulieu
Dulio Design
djrappa
 
Posts: 183
Joined: Wed Jul 01, 2009 10:46 am

Re: Web Fonts

Postby Janina Baltaziewicz » Mon Apr 23, 2018 10:39 am

Hi Clint,

Unfortunately, a browser can only show a font that is also installed on the device where it runs. Pushing a font to another device would mean having to install it manually there (otherwise it would be a huge security risk).
What you can try though is to define another font that should be displayed in case your custom one is not available. WD is completely HTML5/CSS compliant, so you should be able to assign fonts via the Custom HTML Header:
http://www.coolux.de/root/downloads/sup ... enu_wd.htm (bottom)
Here you can find out more about fonts in CSS:
https://www.w3schools.com/css/css_font.asp

In case you are not familiar with CSS, I can recommend doing some of the tutorials on that page. Only an hour or two will be sufficient for understanding how WD works with it.
To get the selector names, simply open your WD page in an external browser and check them with the developer tools ([F12] in Chrome, the tab "Elements" helps identifiying the objects)

I hope this already helps!
Cheers,
Janina Baltaziewicz
Customer Service Engineer
User avatar
Janina Baltaziewicz
 
Posts: 53
Joined: Tue Jun 14, 2016 2:08 pm

Re: Web Fonts

Postby Janina Baltaziewicz » Mon Apr 23, 2018 4:33 pm

Hi Clint,

I just got a solution for you:
It is possible to host a font that the browser can download on its own. What you need is the already mentioned Custom HTML Header and an HTML script that looks like this (example for the font of the specific widget Label1 with a user-defined font "myfont.ttf"):

<style type="text/css">
@font-face { font-family: MyFont; src: url("custom/myfont.ttf"); }
#TextWidgetLabel1 { font-family: MyFont; }
</style>

The font file itself (any type that a browser supports) has to be put in the project's Data folder in this structure: "Data\Web\custom"
I tested this one successfully with a Chrome browser on an external PC that definitely didn't have this font installed before. Internet Explorer is a bit picky there...
For more information concerning browser support, this site is a good reference:
https://caniuse.com/#feat=fontface

Cheers,
Janina
Janina Baltaziewicz
Customer Service Engineer
User avatar
Janina Baltaziewicz
 
Posts: 53
Joined: Tue Jun 14, 2016 2:08 pm


Return to Widget Designer V6

Who is online

Users browsing this forum: No registered users and 9 guests