Damn you Font Awesome

[chuck_agari]

Well, maybe I should direct my ire to MadCap, but the many, many ways that I have found to make Font Awesome work in Flare, well, it just ain't workin'.

The most recent guide I found was here, from March of this very year: https://www.smartoutput.com/using-fonta ... ml-output/

At my company, we use Font Awesome all over the (SaaS) product UI. We have a Pro license and out own CDN.

I followed those instructions to the letter. And what did I get? In the PDF output, nothing. In the HTML5 output, little square placeholder boxes.

We have the most recent version of FA. I understand that they have changed/simplified how the glyphs are referenced. I'm not sure if this affects the instructions laid out in the above guide or not.

I can say that I wanted the glyphs for one topic, so I added the script reference in the head section of that topic. I used the specific code on the FA site for each glyph. Did I succeed? No I did not.

While I'd rather be able to use FA and have the glyphs show up properly on both of my target types, I am not above just taking screen caps of the glyphs and inserting them as graphics. Not ideal, but absent a real, working solution, which I hope to find by posting here, it's what I'll have to do.

[chrisj]

Those instructions just have an outdated CDN. If you go to FA's website you can get the correct reference for the version of FA you need. It's no longer a script, but a reference to a css file. I have it working in my Flare project just fine with no special instructions.

Edit: It looks like if you need SVG it's a script. Not something I've ever needed to do, so I suppose it's a bit different if you need the SVG.
Edit #2: Just tested with the SVG script and it still works in my project. Again, I haven't done anything special other than the defer trick mentioned in the Smart Output post.

[chuck_agari]

Those instructions just have an outdated CDN. If you go to FA's website you can get the correct reference for the version of FA you need. It's no longer a script, but a reference to a css file. I have it working in my Flare project just fine with no special instructions.

Edit: It looks like if you need SVG it's a script. Not something I've ever needed to do, so I suppose it's a bit different if you need the SVG.
Edit #2: Just tested with the SVG script and it still works in my project. Again, I haven't done anything special other than the defer trick mentioned in the Smart Output post.

The CDN that we have does not have the defer attribute, so I just ignored that. Maybe I'll try adding it to see if it makes a difference.

[chuck_agari]

Those instructions just have an outdated CDN. If you go to FA's website you can get the correct reference for the version of FA you need. It's no longer a script, but a reference to a css file. I have it working in my Flare project just fine with no special instructions.

Edit: It looks like if you need SVG it's a script. Not something I've ever needed to do, so I suppose it's a bit different if you need the SVG.
Edit #2: Just tested with the SVG script and it still works in my project. Again, I haven't done anything special other than the defer trick mentioned in the Smart Output post.

The CDN that we have does not have the defer attribute, so I just ignored that. Maybe I'll try adding it to see if it makes a difference.

And it didn't.

[chuck_agari]

Well heck, I actually made some progress. More like two steps forward and one step back, but still....

OK, here goes. FA has several variations. I had installed the solid variant of the TTF on the Windows machine, after uninstalling all of the "free" versions.

Then I found something, I think it was on here, on how to add code to the CSS file. So I added this:

@font-face {
font-family: "Font Awesome 5 Pro";
src: url(../Fonts/webfonts/fa-solid-900.ttf);
}

I was trying to add this character. Using the <i class="far fa-circle"></i> method did not work for either PDF or HTML5.

I then tried adding through the Insert Character dialog. That sort of worked. I ended up with code in my topic that looked like this:

<span style="font-family: 'Font Awesome 5 Pro'; color: #a30014"></span>

That little funky character was originally  which is the Unicode representation. Semi-success! I got a glyph in both the PDF and the HTML, but it was a solid circle.

Turned out the circle outline is from the regular font, not the solid font. So I changed the CSS to this:

@font-face {
font-family: "Font Awesome 5 Pro Solid";
src: url(../Fonts/webfonts/fa-solid-900.ttf);
}
@font-face {
font-family: "Font Awesome 5 Pro Regular";
src: url(../Fonts/webfonts/fa-regular-400.ttf);
}
@font-face {
font-family: "Font Awesome 5 Pro Light";
src: url(../Fonts/webfonts/fa-light-300.ttf);
}

And I changed the code to this:

<span style="font-family: 'Font Awesome 5 Pro Regular'; color: #a30014"></span>

(I left the original next to it for comparison testing, but I changed it to <span style="font-family: 'Font Awesome 5 Pro Solid'; color: #a30014"></span>.)

Bingo! Well partly. I got exactly what I wanted in the HTML5 output. I saw both the solid and the outline glyphs in the topic page.

But in the PDF, where I once saw a solid circle, I now saw nothing.

Compounding the head scratching, when I look in the Insert Character dialog, I see only Font Awesome 5 Pro, with no solid, regular, or light variations (the 3 fonts I installed). When I do a search for the Unicode character, when I select Font Awesome 5 Pro, I get a message that the glyph isn't found. I'm sure if I could get the variations in the Insert Character dialog, I'd probably be OK for the PDF, but I can't figure out how to do that at this point.

Because I'm running Windows in Parallels, I tried installing all 3 fonts natively on my Mac as well. No luck. Still nothing in the PDF.

So I'm half way there, but my primary deliverable right now is PDF, so I'm still in a bit of a hole.

[chuck_agari]

For the record, Windows Character Map is your friend, because Flare's Insert Character dialog box doesn't cut it.

[NorthEast]

Using @font-face only works for HTML5.

To get fonts working in PDFs, you need to install the font in Windows; e.g. install the TTF.
When you do this, also make sure the font-family (for the span) matches what the font calls itself in Windows.

[rgrace]

Speaking of FontAwesome, I inherited an existing setup that evidently uses it, and whenever I run a docs build, I get this message:

"https://use.fontawesome.com/releases/v5.1.1/css/all.css Line: 5. Char: 2046. Missing left brace ({)"

Anyone know what's up with that?