Enabling Fonts in Navigation Pane (Style.css)

[zappy0]

I would like to use the Figtree font for our HTML Help. We generate tripane and top nav. I am able to distribute the font files in a /fonts/ directory within Content\Resources\Stylesheets. The primary stylesheet then refers to those font files. The HTML topics display using the Figtree font. The side navigation tabs and TOC do not.

I specified Figtree in the various locations within each Skin file. As expected, the Flare-generated Styles.css defines Figtree as the font-family. However, it does not have the references to the actual font files. When the help is deployed to a computer that does not have Figtree installed, the topic text displays as desired but the side navigation tabs and TOC use an alternate font.

To fix this, I created a Custom1 directory and a Custom2 directory at the root of my Flare project. I copied Styles.css there as well as the /fonts/ directory. Custom1 holds the Styles.css for a tripane output and Custom2 holds the Styles.css for a top-nav output.

Then, in each HTML output target, I clicked the Build Events tab and added a Windows command such as:

Code: Select all

xcopy /s /i "$(ProjectDirectory)\Custom1\*.*" "$(OutputDirectory)\Skins\Default\Stylesheets" /Y

This solution works, but I need to repeat this across dozens of projects and it seems like there should be an easier solution. Has anyone had this font issue and found an easier solution?

[Psider]

Have you followed all the steps in the help for embedding fonts? There are specific steps for tripane as well as the usual manual stylesheet changes.
https://help.madcapsoftware.com/flare20 ... -Fonts.htm

[zappy0]

Thanks for the reply Psider! I did some more testing and realized this missing font issue only applies to tri-pane HTML output. The link you provided seems to confirm that. My solution automates the process of modifying Styles.css after the build (rather than the manual steps described in the linked topic), although I am replacing the file rather than editing it. I might look at changing my Post-Build Event command to append the font location to Styles.css rather than completely replacing the file.

The link you provided leads me to believe post-build work on Styles.css is the only way to solve this issue for tri-pane output.

I am using installed Flare 2024 r2.

[NorthEast]

The Tripane skin uses frames, meaning the skin and your topic are like separate pages. So stylesheets linked from your topic are not applied to the skin (header, navigation, etc.).

But there's a way to add your custom CSS to the Tripane skin.

Open your Tripane skin, go to the Toolbar tab, then select Edit on the right where it shows the "Custom Javascript..." section.

Add the following code:

Code: Select all

$('<link>').appendTo($('head')).attr({type: 'text/css', rel: 'stylesheet'}).attr('href', 'Content/Resources/Stylesheets/Tripane.css');

That script will add a link in the Tripane skin output to the CSS file - Content/Resources/Stylesheets/Tripane.css.
So you just need to create that stylesheet in your project, and include whatever custom CSS that you want to apply to the skin.

[zappy0]

Thanks NorthEast! That works perfectly and I am so happy that I do not need to overwrite the Styles.css file.

Thank you a million times over!

Tom

[zappy0]

For others who find this thread, the only content I put into the tripane.css file is:

Code: Select all

/*<meta />*/
@font-face {
            font-family: 'figtree';
            src: url('fonts/Figtree-VariableFont_wght.ttf');
        }
@font-face {
			font-family: 'figtree italic';
			src: url('fonts/Figtree-Italic-VariableFont_wght.ttf');
        }