Font fallback for Webhelp

[Olivier Beltrami]

Hi,

For my fixed-space text, in particular source code examples, I use consolas which is much nicer than courier new.

For CHM help, that is not an issue as all my users have the consolas font installed on their system as a prerequisite. But for webhelp, I cannot tell if the viewer will have the consolas font.

Is there some option to have a font fallback if a font is missing ? Or do I need to grep all my webhelp files for consolas and replace it with courier new before uploading ?

Very best regards,

Olivier

[Tim Green]

Hi Olivier,

You just need to locate the <%STYLESHEET%> reference in the HTML page template of the skin you are using and add your own CSS after it to extend the definition of the span.f_CodeExample class, like this:

Code: Select all

<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
   <style type="text/css">
     span.f_CodeExample /* Code Example */
       {
       font-family: Consolas, "Courier New", Courier;
       }
   </style>

If there is already a <style type="text/css"> ... </style> block anywhere after the stylesheet reference you can just insert it along with the other definitions there, instead of adding another complete style block. Both will work, it's just tidier to have everything in one.

[Olivier Beltrami]

Thank you very much, you're the best !

[Olivier Beltrami]

Hello again,

Is there a similar solution for text style sheets ?

For example, when I press F7 the currently-selected text is set to Consolas. But for viewers without that font, i'd also like to have it default to Courier New.

In the UI of my H&M this F7 style is called "Courier New", but I cannot find a reference to it in the HTML page template of the skin I am using.

Very best regards,

Olivier

[Tim Green]

Hi Olivier,

Have a look at the CSS file generated from your project styles, which you will find in your WebHelp output folder. There you will find all the style references. The attributes are split up between paragraph and text attributes. The paragraph attributes are assigned to the class name p.p_StyleName and the font attributes are assigned to the class span.f_StyleName, where StyleName is the name of the style in your project stylesheet. It's good to check in the CSS file, because the name often needs to be modified slightly if it contains spaces etc.

[Olivier Beltrami]

Thank you very much !!!

[Simon_Dismore]

For my fixed-space text, in particular source code examples, I use consolas which is much nicer than courier new... Is there some option to have a font fallback if a font is missing?

Hi Olivier

Using a custom font isn't a big deal if it is efficiently hosted. If you would like to have a fallback for Consolas, you could consider Inconsolata, which is hosted by Google fonts.

I was going to ask whether you really need a mono-spaced font, but I suppose you want your documentation to have the same appearance as your Q++ macro editor. That makes sense.

I really like your calendar service btw.

[Tim Green]

Using a custom font isn't a big deal if it is efficiently hosted.

I originally thought that too and that led to the use of font-based icons in the original versions of the Premium Pack V3 skins. However, there is a problem that needs to be considered: Most ad blockers and the group security profiles of many corporate computers block font downloads and thus web fonts by default. This is more of an issue for font-based icons, because if the icon font is blocked you just get garbage characters instead of the icons. However, you do need always to make sure you have a functional fallback font that will serve just as well if you are using a web font.

[Simon_Dismore]

there is a problem that needs to be considered: Most ad blockers and the group security profiles of many corporate computers block font downloads and thus web fonts by default.

Thanks. I checked into that (I'm interested in moving to variable fonts) and I think the group security profile problem may be less of an issue now that Microsoft changed their mind. I don't know about the ad blocker situation. Do you think that is a general problem even if the web font is hosted on the same "first party" domain as the content, or it is just blocking assets from third party sites like google?

[Tim Green]

Hi Simon,

Do you think that is a general problem even if the web font is hosted on the same "first party" domain as the content, or it is just blocking assets from third party sites like google?

It's a general problem. When Windows security policy is used for it, the trigger is simply the presence of a @font-face rule in the CSS. It is irrelevant where the fonts are stored, all fonts referenced with @font-face are blocked indiscriminately. That was the kicker that forced me to abandon font-based icons and replace them with SVG sprites. I didn't investigate how the ad blockers were identifying the web fonts after that because it wouldn't have made any difference.

[Simon_Dismore]

Thanks. If in future you discover any significant difference between hosting fonts on first vs third party domains, please give us all a heads-up.