Selecting the correct Font Awesome style/weight/variant

This forum is for all Flare issues not related to any of the other categories.
Post Reply
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Selecting the correct Font Awesome style/weight/variant

Post by chuck_agari »

For the most part, I have gotten Font Awesome working correctly, and in both PDF and HTML5 outputs. However, when it comes to selecting the correct style/variant, I'm stuck--and not only in Flare.

Here's how I insert an Font Awesome glyph in Flare:

1. In the app, I right-click on the FA glyph being used and select Inspect. I note which glyph it is.
2. I go to the Font Awesome website, find the glyph, and copy its Unicode value,
3. In Flare, when my cursor is where I want to inset the glyph, I go to Insert > Insert Character > Insert Character.
4. In the Font drop-down list, I select Font Awesome 5 Pro. (I have to scroll down a couple of times to get to it.)
5. In the Search box, I paste the Unicode character value, then click the Search icon.
6. I click the character to select it.
7. I click Insert.
8. I click Close.

Thing is, Font Awesome has several variants, all of which are installed on my computer and all are visible in the Fonts settings. The two I'm primarily concerned with are the Solid and Regular ones. The latter is an outline and the former a filled version of the same glyph.

In Flare, I sometimes get the filled in version when I want the outline version. The Unicode value is the same; the only difference is in the font variant. And I am not able to figure out how, in Flare (or in Word, for that matter), to select different variants of the same font.

Font Awesome's help shows how it's done in Sketch (https://fontawesome.com/how-to-use/on-t ... -ligatures), but the options that I see there I do not see in Flare. Anyone know how do do this?
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Selecting the correct Font Awesome style/weight/variant

Post by ChoccieMuffin »

In the example you gave, the attribute that changes is "weight", so can you specify the weight of the character in Flare, just as you would for any other bit of text? (In the Font Properties dialog box it's called "Style" rather than "Weight", but I'd look there first.)

I'm guessing that sometimes you get the "solid" version if you insert it into a paragraph that is styled to be bold, and "normal" version when inserted into an ordinary paragraph that isn't styled as bold. I admit I could be way off as I don't use Font Awesome, but it shouldn't take more than a moment to try it.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Selecting the correct Font Awesome style/weight/variant

Post by NorthEast »

If you're using CSS and @font-face, then the Font Awesome docs tell you what font-weight to use; e.g. 900, 400, 300.
See: https://fontawesome.com/how-to-use/on-t ... /basic-use
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Re: Selecting the correct Font Awesome style/weight/variant

Post by chuck_agari »

Neither adding weights to my @font-face definitions in my CSS:

Code: Select all

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

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

@font-face 
{
	font-family: "Font Awesome 5 Pro Light";
	src: url(../Fonts/webfonts/fa-light-300.ttf);
	font-weight: 300;
}
Nor adding it to a class and applying the class to the glyph specifically....

Code: Select all

.far {
	font-family: "Font Awesome 5 Pro Regular";
	font-weight: 400;
}
...worked.

The folks at FA were able to do this--in Word/Mac. When I showed them that what they were doing in Word/Mac I could not do in Word/Windows (my test bed), they suggested uninstalling my current FA version and reinstalling the latest version. (From waaaay back in the days of the summer of '90 when I worked at Microsoft doing product support for Windows 3.0, I came to understand that "reinstall" is code for "I have no clue why this is not working." and note that was almost never my "solution" for customers.")
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Selecting the correct Font Awesome style/weight/variant

Post by NorthEast »

Are you using the CSS supplied with FA?

You said you selected "Font Awesome 5 Pro" as the font, but the font-family names in your CSS are "Font Awesome 5 Pro Solid" and "Font Awesome 5 Pro Regular".
So if you don't use the right name, it's not going to work.

I looked at the CSS supplied with the FA v5 free version, and the supplied @font-face definitions look different to yours.

* They already include a font-weight.
* The font-family has the same name for each weight; i.e. it's "Font Awesome 5 Free" for both. It doesn't use "Solid" or "Regular".

The way FA tell you to use the font, is to set the font-family (e.g. "Font Awesome 5 Free"), and use the font-weight (900, 400, etc.) to control the solid/regular styles.

Assuming FA Pro is the same as FA Free, it doesn't look like you're using the CSS supplied with FA.
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Re: Selecting the correct Font Awesome style/weight/variant

Post by chuck_agari »

So I ended up doing a reinstall like the FA folks suggested. I installed only the Regular and Solid variants. And I updated my CSS thusly:

Code: Select all

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

@font-face 
{
	font-family: "Font Awesome 5 Pro Regular";
	src: url(../Fonts/webfonts/Font_Awesome_5_Pro-Regular-400.otf);
	src: url(../Fonts/webfonts/fa-regular-400.ttf);
	font-weight: 400;
}
It's working now.

(Well, it's working in the outputs. When I try to preview a topic as either HTML5 or PDF in Flare, they are not rendered correctly.)
Post Reply