We use two different font-icon families in our documentation. Each font family corresponds to the font icons used by the two products we're documenting. The fonts are: falcon and kronos-ready-icons. They both display correctly in HTML output, but only one displays in the PDF output (and the Acrobat Distiller is set to always embed both fonts).
The MainStyles.css contains the following:
icon
{
display: inline;
font: falcon;
}
When I removed the font: falcon line, the HTML output is still fine but now the PDF output does not display any of the font icons. Adding the font to the style tag within the topics as follows corrects the problem, but I'd really like to avoid this if possible:
<p>This is a WFD Icon: <span class="label">edit <icon class="icon-k-edit" style="color: #0a75c2; font-family: falcon"></icon></span></p>
<p>This is a WFR icon: <span class="label">Save <icon class="icon-save" style="color: #0a75c2; font-family: kronos-ready-icons;" /></span></p>
The main stylesheet links to style.css, which contains both sets of font icons. For the falcon font, the style.css contains the following:
[class^="icon-k-"],
[class*="icon-k-"]
{
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'falcon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: inherit;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-
{
display: inline-block;
font: normal normal normal 14px / 1 kronos-ready-icons;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
For the kronos-ready-iconsfont, the style.css contains the following:
[class^="icon-"],
[class*="icon-"]
{
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'kronos-ready-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Madcap Support has been very helpful in resolving most of the problems that I had with the font-icons, but there's still this one pesky issue.