Cannot reference two font-icon families

[DeniseP]

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.

[Dave Lee]

If the CSS is in that order, then your classes are matching both fonts.

So icon-k-edit will first match:

[class^="icon-k-"],
[class*="icon-k-"]

But icon-k-edit will then also match, which means this "wins":

[class^="icon-"],
[class*="icon-"]

If that's the case, then change the CSS order, so "icon-k-" is last.

[DeniseP]

Thanks, that makes perfect sense but "icon-k" is after "icon-" in the stylesheet:

@font-face
{
font-family: 'kronos-ready-icons';
src: url('../../fonts/kronos-ready-icons.ttf?') format('truetype'),
url('../../fonts/kronos-ready-icons.woff?wg71t8') format('woff'),
url('../../fonts/kronos-ready-icons.svg?wg71t8#kronos-ready-icons') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face
{
font-family: 'falcon';
src: url('../../fonts/falcon.eot?7o3a8c');
src: url('../../fonts/falcon.eot?7o3a8c#iefix') format('embedded-opentype'),
url('../../fonts/falcon.woff2?7o3a8c') format('woff2'),
url('../../fonts/falcon.ttf?7o3a8c') format('truetype'),
url('../../fonts/falcon.woff?7o3a8c') format('woff'),
url('../../fonts/falcon.svg?7o3a8c#falcon') format('svg');
font-weight: normal;
font-style: normal;
}

.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;
}

[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;
}



.icon-tax-family-totals:before
{
content: "\e9aa";
}

.icon-availability-preferences:before
{
content: "\e9ab";
}

.icon-employee-pay-period:before
{
content: "\e9ac";
}

.icon-k
{
display: inline-block;
font: normal normal normal 14px / 1 falcon;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[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-k-barcode:before
{
content: "\e600";
}

.icon-k-transfer:before
{
content: "\e603";
}

.icon-k-edit-results:before
{
content: "\e604";
}

[Psider]

What name displays for the font in Word? I have a feeling the font-family name needs to match that.

[Dave Lee]

Looking at the CSS you've posted, why do you have any of these? They're presumably not used.

icon {...} - this also isn't a class, unless it's supposed to be .icon {...}
.icon- {...}
.icon-k {...}

I'd possibly also try removing the "!important" from the font-family.

It may be simpler just to remove/comment the CSS for one set of icons at a time, and test them individually.
If they work individually but not when combined, then you know it's a conflict in your CSS.

What name displays for the font in Word? I have a feeling the font-family name needs to match that.

Yep, for PDFs, the font has to be installed in Windows, and the font-family must be set to the font name as it appears in Windows apps - like Flare, Word, etc.

But Denise said "Adding the font to the style tag within the topics as follows corrects the problem", so if that works for PDFs then it means the font name is ok.

[DeniseP]

Thanks for the suggestion, but removing "important" didn't change anything.

You said:

icon {...} - this also isn't a class, unless it's supposed to be .icon {...}[/img]

The icon style is defined in the MainStyles.css stylesheet:

icon
{
display: inline;
font: falcon;
}

And, as I understand it, it uses the generic classes from the styles.css sheet, for example: .icon-save or .icon-k-save

So the code in the topic is:

<p>This is a WFD Icon: <span class="label">edit <icon class="icon-k-edit" style="color: #0a75c2;></icon></span></p>
<p>This is a WFR icon: <span class="label">Save <icon class="icon-save" style="color: #0a75c2;" /></span></p>

I think the conflict is with the icon tag definition in the MainStyles.css and the icons themselves defined as generic classes in the style.css. It seems to me that I should be able to remove the font: falcon attribute from the icon definition, and Flare should use the two fonts defined in the style.css. It appears to do this for HTML but not for PDF. The PDF output seems to require that the font be defined by the icon tag.

[Dave Lee]

Ok - I'd assumed the CSS icon {...} was invalid because <icon> isn't an HTML tag. So <icon> is a custom XML tag you're using?

The CSS for both of these wouldn't be used though:
.icon- {...}
.icon-k {...}

Also, if your CSS is in two separate CSS files, then remember the order of these files is important - the last CSS file can take precedence.

All I can suggest is to test the CSS for each font individually with your PDFs .

It probably doesn't help that one icon might match 3 separate font-family definitions in your CSS.
Generally speaking, it's better not to use very complex CSS for PDFs, as Flare's parser will not handle everything that will work in a browser.

[DeniseP]

I think I figured it out thanks to Dave's comments.

At the risk of admitting my stupidity, two things:

1. I didn't realize that <icon> was a custom tag. I can't remember how it came about, but it's working quite nicely for hundreds in not thousands of topics that use the "falcon" set of font icons.

2. I didn't realize that I could apply more than one class to a tag.

So here's what I did:

I created a new class for <span> in MainStyles.css:

span.iconWFR
{
font-family: 'kronos-ready-icons';
display: inline;
}

So the markup in my topics that use the kronos-ready-icon font icons is:

Code: Select all

<p>This is a WFR icon: <span class="label">Favorite<span class="iconWFR icon-favorite" style="color: #0a75c2;"></span></span></p>

Ideally, I would do the same thing for the falcon font icons, but since we have so many topics that use the original markup, I can leave it as is.

Many many thanks Dave. You are a genius!!!!