Getting MadCap Styles to Use Web Fonts

kevsheehan · Post by **kevsheehan** » Fri Jun 02, 2017 10:58 am

I'm starting to implement the use of some licensed web fonts in my project for WebHelp output, and so far I've been able to get them work well for all types of styles except for MadCap styles, specifically MadCap|dropDown Head and MadCap|breadcrumbsProxy.

To get the non-MadCap styles working, I set the font family on the styles to my web font, I added the CSS key required for the fonts to the Master Page (<link href="https://xxx.com/xxx/css/fonts.css" rel="stylesheet" />), and checked the Allow Local Stylesheets box on my target so the CSS key would not get stripped out when I build the target (which took me way too long to figure out). For the MadCap styles, I also updated the font family to my web font, but the CSS key in the topic header doesn't seem to be referenced because any text using those styles is not displaying the web font.

Does anyone know how to get the MadCap styles to use the CSS key? I noticed that there is a MadCap.css referenced in the topic headers; should I be adding something there? I've already tried adding the CSS key to that file manually and it didn't seem to resolve the issue, though if I need to change the formatting when using that link in a stylesheet I don't know how to do it.

Thanks for any help you can provide!

Post by **doc_guy** » Fri Jun 02, 2017 4:21 pm

I usually add @import commands to my CSS file to import the fonts there. Then I set the font style on the <body> tag in the CSS, and it applies correctly to all elements in my document, including on drop-down heads. I haven't tried to style those independently yet, so that may be different.

Post by **NorthEast** » Tue Jun 06, 2017 12:55 am

kevsheehan wrote:I'm starting to implement the use of some licensed web fonts in my project for WebHelp output, and so far I've been able to get them work well for all types of styles except for MadCap styles, specifically MadCap|dropDown Head and MadCap|breadcrumbsProxy.

MadCap styles are a bit different because they're generated at build time; e.g. they're <MadCap:xx> tags in the source HTML, but will be generated as things like <div> and <span> tags in the output HTML.

The problem is that Flare seems to ignore some (but not all) of the CSS properties you set in the MadCap| styles, because it doesn't include them in the generated CSS (for those div and span tags).

The solution is to find out what tags/classes are used in the output, and add the styles for these in your own CSS file.
If you press F12 in your browser, you can inspect the HTML/CSS and find out what to use.

For example, in HTML5 outputs, breadcrumbs are in a container <div class="MCBreadcrumbsBox_0">, so you could add some formatting to your CSS like:

Code: Select all

div.MCBreadcrumbsBox_0 { font-family: 'YourFont'; }

kevsheehan · Post by **kevsheehan** » Wed Jun 07, 2017 6:39 am

This suggestion got things working for me. I added div.MCBreadcrumbsBox_0 and a.MCDropDownHotSpot_0 to my stylesheet and then and then my custom font starting being used.

Thanks, Dave!

Post by **trent the thief** » Tue Dec 26, 2017 12:33 pm

Dave Lee wrote:
kevsheehan wrote:I'm starting to implement the use of some licensed web fonts in my project for WebHelp output, and so far I've been able to get them work well for all types of styles except for MadCap styles, specifically MadCap|dropDown Head and MadCap|breadcrumbsProxy.
MadCap styles are a bit different because they're generated at build time; e.g. they're <MadCap:xx> tags in the source HTML, but will be generated as things like <div> and <span> tags in the output HTML.

The problem is that Flare seems to ignore some (but not all) of the CSS properties you set in the MadCap| styles, because it doesn't include them in the generated CSS (for those div and span tags).

The solution is to find out what tags/classes are used in the output, and add the styles for these in your own CSS file.
If you press F12 in your browser, you can inspect the HTML/CSS and find out what to use.

For example, in HTML5 outputs, breadcrumbs are in a container <div class="MCBreadcrumbsBox_0">, so you could add some formatting to your CSS like:
Code: Select all
div.MCBreadcrumbsBox_0 { font-family: 'YourFont'; }

Hi Dave,

Based on your example for adding a footer to the tripane, I added a separate CSS that is able to change anything in the skin. Between your idea for the extra CSS that flare doesn't ignore and an easy after-build mod to Default.htm to move the search bar over and remove the header, I created a header-less, dual-pane output that places a re-styled search bar above the tabs.

I can't share content, but I can show the structure:

Using the skin.css from your project and some work with browser Dev Tools to find which styles to change, I managed to make an output that we can shoehorn into an web app's client area while still displaying the app's header and footer.

Thanks for all your great work, Dave!

MadCap Software Forums

Getting MadCap Styles to Use Web Fonts

Getting MadCap Styles to Use Web Fonts

Re: Getting MadCap Styles to Use Web Fonts

Re: Getting MadCap Styles to Use Web Fonts

Re: Getting MadCap Styles to Use Web Fonts

Re: Getting MadCap Styles to Use Web Fonts