WebStyle Font Family question

While working on a web project that I recently brought over to Xojo from my Real Studio days, I noticed that some of my previously created WebStyles had Helvetica Neue Light as a Font Family option. Unfortunately, in Xojo I can no longer choose a particular typeface style for Helvetica Neue. The only option is Helvetica Neue itself. There doesn’t seem to be a way to access the bold, light, ultralight, etc. typefaces that are within that family.

How do I access these extra typefaces (e.g., Helvetica Neue Light) for use in a WebStyle within Xojo?

It doesn’t look like either Real Studio or Xojo let you enter an arbitrary font name into the Style editor. So you seem to be at the mercy of what fonts the IDE detects. If Real Studio detects something that Xojo doesn’t, you could make a temporary project in Real Studio 2012r2.1, add the style and font you want, save that project, open in Xojo, and copy the style.

Remember that web pages rely on a your chosen font being on the user’s computer. That’s why you set a list. The browser then picks one from the list, usually the first it knows about. If you need a particular font due to relying on metrics or exact styling, you might be able to use a web font. I have a web font facility in Studio Stable Web Essentials. There’s an online demo here:


Click “#3” top left of the embedded demo web app, then click “Web Font” top right.

If you have or are considering Web Custom Controls, there are methods and classes for…

  • Modifying WebStyles at runtime.
  • Creating and applying new WebStyleTD styles at runtime. (WebStyleTD supports creating styles on the fly, applying multiple styles to a control, and style sharing across sessions.)
  • Setting whatever css you like, either directly on a control or via a WebStyleTD style.
  • Using web fonts like Google fonts.

With wcc you would just set the css property directly on the WebStyle, WebStyleTD, or WebControl.

Thanks to both of you for your excellent suggestions. I’ll definitely take a look at each option.