Including Fonts in Online Help Builds

[Daniel Lemke]

Hi!

I am declaring some proprietary font families in my stylesheet for online help. Seems to work just fine when including the fonts in the build and setting their path in the stylesheet, like so:

Code: Select all

@font-face {
  font-family: 'KnowledgeRegular';
  src:  url('../Fonts/KnowledgeRegular.woff') format('woff');
}

body
{
	font-family: 'KnowledgeRegular', Arial, sans-serif;
	font-size: 11pt;
	color: #444;
}

My trouble is that we do not like to have post-processing with the help builds, and I cannot figure out a way to get Flare to include the Fonts directory in the build. We also use the Output Option, under the Advanced tab, "Exclude content not linked directly or indirectly from the target; we have folders and files in our projects that should not ship. Our help system is often served up within a customer's network so hosting the fonts is not viable for us with our on-premises customers.

Do you include fonts in your help builds?
If so, How do you get them into the build?

[Nita Beck]

Dan, will all of your users have the TR propiertary font installed on their machines? I suspect not, unless your online output is being served up on an intranet. For the TR Help systems I've done (as an independent contractor to TR) for products sold to the public, I've used Arial, as specified in the TR corporate branding guidelines, as least as they were last provided to me. Do the branding guidelines you're using specify Knowledge for online content?

To answer the question more broadly, no I don't include installable fonts with a Help system. Instead, I have my Help systems use a font-family declaration that is something like "Arial, Helvetica, san serif" so that it'll first look for Arial, then in the absence of Arial will look for Helvetica, and then in the absence of Helvetica will use whatever the browser's default san serif font is.

[Daniel Lemke]

Dan, will all of your users have the TR propiertary font installed on their machines? I suspect not, unless your online output is being served up internally. For the TR Help systems I've done (as an independent contractor to TR) for products sold to the public, I've used Arial, as specified in the TR corporate branding guidelines, as least as they were last provided to me. Do the branding guidelines you're using specify Knowledge for online content?

The branding guidelines I have access to state:

Arial is our secondary typeface. Use it only where it is not possible to use Knowledge. For example, Arial should be used in all Microsoft® Office applications to ensure consistency when files are distributed across workstations and platforms.

The users will not have the font locally installed, but I am packaging the fonts into the help build and calling them using a relative path in the stylesheet. I tested this on a crappy old VM I have that does not have the knowledge font installed and it seems to work okay (with limited testing...).

[Nita Beck]

I think that you'll have to use Arial. Even though the branding guidelines say it's the secondary font choice, I think for you it's the only font choice. I just can't see how your corporation would want its proprietary font installed on end-users computers. Even for me as an independent contractor to the same corporation, I am held to very strict licensing usage and I assume (though I could be wrong) that your corporation would not want their proprietary font to be installed on end-users' computers and, therefore, now out of the corporation's control. (You might want to check to make sure that your packaging the font in the Help files is approved by management. (Please forgive me if I sound like I'm trying to tell you how to do your job. I don't mean to come off that way. Rather, "proprietary" means just that, and you might not have any right to distribute the font as you're planning.)

I agree that Arial looks pretty crappy, but it is the preferred font choice of your corporation when it not possible to use the proprietary one. I haven't looked at a Reuters web site recently, but I bet the only instances of the proprietary font are in images and the font of the text of news articles is probably Arial. (But I could be wrong... I should go look before I stick my neck out like this! )

[NorthEast]

It should work fine, I use web fonts in our projects, also using @font-face.
The only thing I would add, is that you might need more than just woff to provide wider support (see https://css-tricks.com/snippets/css/using-font-face/).

For your project, it just sounds like the problem is the setting Exclude content not linked directly or indirectly from the target.
Flare isn't 'seeing' the link to the font file in your CSS, so it's not including it in the output.

So if you want to use 'Exclude content..' , then you have to make Flare 'see' the font files.
One way is to add links in the header of a topic:

Code: Select all

<link href="Resources/Fonts/KnowledgeRegular.woff" />

Or alternatively, don't use the 'Exclude content..' setting, and use conditions to exclude the files/folders.
I don't use the 'Exclude content..' setting because it doesn't reliably 'see' certain links in CSS and scripts.

[Nita Beck]

I still think it would behoove Dan to make sure that his corporation approves of his distributing their proprietary font... Perhaps I'm being overly cautious because the folks I work for in the same corporation are a bunch of lawyers who have drilled their licensing requirements into me.

[Daniel Lemke]

Nita, I am glad you mentioned the distribution issue. I started a conversation with someone from our branding team to get that sorted out. It will be a shame if we cannot get something worked out because the Knowledge font looks much nicer than our Arial default.

Dave, I tested your link and it works great. It also indirectly solved an issue we have had for quite some time with setting the favicon file.

Appreciate the help from the both of you!

[Nita Beck]

Nita, I am glad you mentioned the distribution issue. I started a conversation with someone from our branding team to get that sorted out. It will be a shame if we cannot get something worked out because the Knowledge font looks much nicer than our Arial default.

Thanks, Dan, for not thinking me a busy-body. If you find out that it's OK, then maybe *I'll* start using the proprietary font in the Help systems I maintain for your company. (Shameless plug: If you ever need consulting help, Dan, I'm already an approved vendor for TR...)

Dave, I tested your link and it works great. It also indirectly solved an issue we have had for quite some time with setting the favicon file.

And again I've learned more new tricks from our good pal, Dave!

[Daniel Lemke]

Dave,

I actually started this whole thing because of that article you posted; however, as soon as I added in the second font sources, my output stopped displaying my preferred font. I think it might have something to do with how our woff fonts are named without hyphens and the ttf files are all named with hyphens. I don't understand quite enough about fonts yet to figure that out, but our application only supports a small set of browsers, so as long as the woff files work on those, I am okay.

Nita,

I did get the go-ahead to package my fonts up with our help. Hopefully that becomes good news for you. I actually like our Knowledge font, and especially when stacked up against Arial.

[cayennep]

I'd like to hear thoughts on my argument that help should not have to match the company design exactly. I have used fonts that I think are similar (and some that the branding guidelines suggest as well) but I don't get everything I need that way. I am using the branding color palette, fwiw.

> first and foremost, I don't think this is practical, or a good idea. It's like trying to match a book contents to the cover - they server very different purposes and are used differently. Technical documentation needs to be 'designed' for usability/readability as #1 priority, NOT look and feel, which is secondary in my opinion. This is completely different content from the web site or other branding collateral.

> the logistics of it - eg, using Arial, which is already not an ideal choice, for everything is a really bad idea. It seems like trying to force things in a somewhat arbitrary manner that still won't serve the original purpose

> what happens to PDFs, and printing? If the font is not installed, or available on the printer, is there a random substitution? That's what I've generally found.

> the 'exclude content...' setting is important for me, and I do not want to fiddle with excluding specifically - esp as I'm working with inherited content and have many other issues to address, don't want to add that