Page 1 of 1

Selecting the correct Font Awesome style/weight/variant

Posted: Wed Sep 25, 2019 2:16 pm
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?

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

Posted: Thu Sep 26, 2019 4:46 am
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.

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

Posted: Thu Sep 26, 2019 5:13 am
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

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

Posted: Thu Sep 26, 2019 12:35 pm
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.")

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

Posted: Thu Sep 26, 2019 11:49 pm
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.

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

Posted: Mon Sep 30, 2019 12:01 pm
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.)