Not renaming font family on MacOS

Question

Not renaming font family on MacOS

rynop opened this issue 5 years ago · comments

Reproduce steps:

Download FontAwesome for web
Run:

python fontname.py "TEST" /Users/ryan/Downloads/fontawesome-free-5.8.1-web/webfonts/fa-solid-900.ttf

[OK] Updated '/Users/ryan/Downloads/fontawesome-free-5.8.1-web/webfonts/fa-solid-900.ttf' with the name 'TEST Solid'

Open fa-solid-900.ttf with Font Book app (or another app that displays .ttf font family)
Note that font family is still Font Awesome 5 free

I wrote a blog post where this used to work (at least on 12/27/2018). I can't figure out what has changed.

Chris Simpkins · Answer 1 · Wed May 01 2019 05:50:38 GMT+0800 (China Standard Time)

Sorry for the troubles Ryan. Do you mind pushing the font to this issue report thread so that I can have a look at the OpenType tables after your write attempt?

Ryan Pendergast · Answer 2 · Wed May 01 2019 05:58:03 GMT+0800 (China Standard Time)

No need to be sorry, really appreciate this program. Absolutely, zip attached below.

Zip contains an original un-modified fa-solid-900-before-fontname.ttf AND a fa-solid-900-after-fontname.ttf that was created by doing:

cp /Users/ryan/Downloads/fontawesome-free-5.8.1-web/webfonts/fa-solid-900-before-fontname.ttf /Users/ryan/Downloads/fontawesome-free-5.8.1-web/webfonts/fa-solid-900-after-fontname.ttf

python ~/fontname.py "test" /Users/ryan/Downloads/fontawesome-free-5.8.1-web/webfonts/fa-solid-900-after-fontname.ttf

[OK] Updated '/Users/ryan/Downloads/fontawesome-free-5.8.1-web/webfonts/fa-solid-900-after-fontname.ttf' with the name 'test Solid'

ttf-before-and-after.zip

Please LMK if you need anything else. Thanks!

Chris Simpkins · Answer 3 · Wed May 01 2019 06:28:24 GMT+0800 (China Standard Time)

It is doing the right thing:

but it looks like those fonts define extra name table records that override the ones that we edit here. I think that this is leading to the issue of the default value of "Font Awesome 5 Free" remaining at install time.

It looks like the FontAwesome free files are released under the SIL OFL license. You can use the ttx executable released in the fonttools/fonttools project to dump the modified font binary to XML, manually edit the name table records 16, 17, and 18 (or remove all of them), then rebuild the fonts with ttx from the modified XML. Use ttx --help after you install the fonttools library for detailed help on how to use the tool.

The name table spec documentation for these name table records is available here.

I'll need to take a look at how we should handle this issue in the script here...

Thanks for letting me know about this. I will have a look at it.

Ryan Pendergast · Answer 4 · Wed May 01 2019 23:30:45 GMT+0800 (China Standard Time)

Ah ok, great thanks. I'm a font noob so will have to tinker around with fonttools.

Chris Simpkins · Answer 5 · Thu May 02 2019 00:19:16 GMT+0800 (China Standard Time)

The ttx approach is very simple. ttx will dump the OpenType tables to XML where you can edit by hand and re-save the XML. Then ttx will compile the XML back into valid font binaries.

Let me know if you get stuck along the way. Happy to take a look at the XML as you do this if you need a hand with any of the OpenType spec specific things.

Chris Simpkins · Answer 6 · Thu May 02 2019 00:22:40 GMT+0800 (China Standard Time)

and I should mention that the ttx executable is installed when you install the fontTools library. Both are Python 3 based and you can install with the Py3 interpreter based pip on your platform.

$ pip install fontTools
$ ttx --version
$ ttx --help

Ryan Pendergast · Answer 7 · Thu May 02 2019 01:20:47 GMT+0800 (China Standard Time)

Thx Chris. I tried ttx and it was easy to use. I'm not sure what the repercussions are on removing vs re-naming.

In either case, I'll need to make a one (or few liner) to make it easy for others to quickly "fix-up" the .ttf file. Any dev who wants to use font awesome in their native mobile app (NativeScript, React Native etc) will run into this issue of needing to change the font-family. I want to make it as easy on other devs as possible.

Something like:

ttx fa-solid-900.ttf
sed -i .bak 's|<namerecord.*>(Font Awesome 5 Free)</namerecord>|<namerecord.*>Font Awesome 5 Free Solid</namerecord>|ig' fa-solid-900.ttf
ttx fa-solid-900.ttf

Of course the regex isn't valid (don't have time ATM to work on it) but the point is it needs to be simple to do.

Any thoughts on how this could be made easier?
Any idea how the following rule determines which table name record to use? The following works with the non-modified fa-solid-900.ttf

.fas {
    font-family: 'Font Awesome 5 Free';
}

Chris Simpkins · Answer 8 · Thu May 02 2019 01:49:34 GMT+0800 (China Standard Time)

Good to hear!

I'm not sure what the repercussions are on removing vs re-naming

The extended naming fields in the OpenType name table (ID's 16 and above) are used for style linking of large font families like those that have both broad weight and width builds (e.g., Condensed Thin, Condensed, Condensed Bold, etc.). There is no spec'd subfamily name "Solid" and since FA needs this to contrast against designs without fills it looks like the authors are defining it through those OpenType name records. My suggestion would be to change the entire family name to "[NAME] Solid" and replace the current "Solid" variant with "Regular" similar to how the definitions appear below for the Roboto Regular font:

Then it should behave like the Regular variant of any other typeface and you should be able to use:

.fas {
    font-family: '[NAME] Solid';
}

in your CSS files.

If you need to use the unfilled (name?) FA designs, then replace the "Solid" in the above naming scheme with whatever term is appropriate (e.g., "Unfilled") and then you should be able to access it with the following CSS definition:

.fau {
    font-family: '[NAME] Unfilled';
}

Chris Simpkins · Answer 9 · Thu May 02 2019 02:01:54 GMT+0800 (China Standard Time)

Any thoughts on how this could be made easier?

If this is a required resource out there, it might be worth pushing the builds that you develop to a repository and distribute them to other users so that they don't need to generate them on their own. That would be the simplest approach :)

I'd be happy to help whip up a Python script that performs the name table modifications if you want to create the repository and let me know how you want the naming to appear for users.

Ryan Pendergast · Answer 10 · Thu May 02 2019 03:18:22 GMT+0800 (China Standard Time)

Damn you have some strong font-FU ;)

I like the re-distribute idea (for simplicity sake), and that is really nice to offer your services, however I selfishly don't want to spend time re-building and re-distributing every time FA has a release.

I was really hoping I could come up with a CSS rule that would pick the correct Regular or Solid variation without needing to modify their .ttf files at all. Let me run this by you and see if you can come up with a suggestion that can pull this off.

First some background. They have 4 fonts: Solid,Regular,Light,Brands. The free download includes Solid, Regular and Brands (even though Regular isn't supposed to be free). I really think their naming convention is poor, however thats moot at this point :)

Here the 3 fonts:

Note both the non-brand ones are in the Font Awesome 5 Free family. Regular isn't free anymore (I know confusing).

I was hoping I could do:

// This always works
.fab {
  font-family: 'Font Awesome 5 Brands', fa-brands-400;
}

// This doesnt work
.far {
  font-family: 'Font Awesome 5 Free Regular';
}

// This doesnt work
.fas {
  font-family: 'Font Awesome 5 Free Solid';
}

Only thing I've gotten to work is to NOT include fa-regular-400.ttf in my app, and specify this css:

.fab {
  font-family: 'Font Awesome 5 Brands', fa-brands-400;
}

// Note I omitted "Solid"
.fas {
  font-family: 'Font Awesome 5 Free', fa-solid-900;
}

Can you think of a font-family name specification hack that would allow me to "install" both regular and solid?

I know this is outside the realm of fontname.py so feel free to tell me to pound sand...

Chris Simpkins · Answer 11 · Thu May 02 2019 04:37:09 GMT+0800 (China Standard Time)

Unfortunately, I don't have much CSS-fu :) I'm not sure that I can be of much use there...

Here is how FA is defining it in their CSS file:

@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}

.fab{font-family:"Font Awesome 5 Brands"}

@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400}

@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}

.fa,.far,.fas{font-family:"Font Awesome 5 Free"}

.fa,.fas{font-weight:900}

Have you tried using the ttf settings from the CSS there? Maybe the key is in these definitions?

.fab{font-family:"Font Awesome 5 Brands"}
.fa,.far,.fas{font-family:"Font Awesome 5 Free"}
.fa,.fas{font-weight:900}

It looks like they are distinguishing the Free solid (weight = 900) and Free regular (weight = 400) builds with weight definitions in the @font-face settings above. The fonts are being rendered as Free Regular = family Regular variant and Free Solid = family Black=900 weight variant.

Ryan Pendergast · Answer 12 · Thu May 02 2019 05:37:17 GMT+0800 (China Standard Time)

Unfortunately NativeScript apps can only reference included fonts by font-family (iOS) or file name (Android).

No worries, I'm not blocked on this. Given the recent change of FA regular icons becoming non-free, my hunch is they will be changing their font files soon. I'll circle back on this when I have a little more time.

Closing for now as this isn't really an issue on your end. Thanks for all your time and input!

Chris Simpkins · Answer 13 · Thu May 02 2019 05:42:47 GMT+0800 (China Standard Time)

No worries. The font family name approach that I suggested earlier will do it. You just need to define three different font family names if that is a constraint on iOS.

Ignacio Fuentes · Answer 14 · Wed May 15 2019 03:30:46 GMT+0800 (China Standard Time)

Just ran into this issue within a NativeScript app, and Font Awesome 5.
It seems that basically you can now only use either Regular, or Solid.

There is no way to use both inside the same app.
The reason is that they both have the same name and there is no way to tell them apart.

Is this correct?

Chris Simpkins · Answer 15 · Sat May 25 2019 21:01:32 GMT+0800 (China Standard Time)

@ignaciofuentes it sounds like that is correct Ignacio. I believe that Regular and Solid are style linked and NativeScript does not have a way to distinguish between the two fonts.

If the two of you are willing to help me experiment with this, I will create a script to address the issue of naming with Font Awesome releases. The goal will be to create an approach that sets the name tables to allow NativeScript to distinguish the separate font variants so that you can use them all. Let me know if you are available for this and I will dig into the problem.

Chris Simpkins · Answer 16 · Sat May 25 2019 21:25:16 GMT+0800 (China Standard Time)

This demonstrates what is going on.

The Regular and Solid versions are being "seen" as the different weight variants in the same type family:

To get at that with CSS, you would need to specify a different weight value with the same typeface family name (or file path on Android as I understand Ryan's comments above). See #3 (comment) for the approach that I pulled from Font Awesome's own CSS files.

The weight definitions can be modified in the fonts so that all three Regular, Solid, and Brands are all seen as different font families with the same font weight.

Here is one location where that problem will need to be addressed OS/2.usWeightClass:

The other will be in the name tables of the fonts I think. This will be where we will need to experiment a bit.

Chris Simpkins · Answer 17 · Sun May 26 2019 08:27:32 GMT+0800 (China Standard Time)

@rynop @ignaciofuentes

Can I ask one of you to try the following modified builds in a NativeScript application:

fa-NativeScript_mods.zip

I did the following:

eliminated unnecessary style linking name table records
changed OS/2.usWeightClass in the Solid variant to 400
changed nameID 2 record to "Regular" (from "Solid") in the fa-solid-400 build

If those work (i.e., allow you to use Regular, Solid, Brands simultaneously in the same application) then I have an approach to build a script that will replicate these modifications with future Font Awesome updates.

Ignacio Fuentes · Answer 18 · Sun May 26 2019 08:54:28 GMT+0800 (China Standard Time)

I will try this in the next couple of days Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Chris Simpkins <notifications@github.com> Sent: Saturday, May 25, 2019 8:27:41 PM To: chrissimpkins/fontname.py Cc: Ignacio Fuentes; Mention Subject: Re: [chrissimpkins/fontname.py] Not renaming font family on MacOS (#3) Reopened #3<#3>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#3?email_source=notifications&email_token=AAAQTPWNVZKKKPTHCZAZRHDPXHKP3A5CNFSM4HJP43O2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGORUPEN2Y#event-2367571691>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAAQTPXFCDX6RE7TEJMVIH3PXHKP3ANCNFSM4HJP43OQ>.

Chris Simpkins · Answer 19 · Sun May 26 2019 09:07:39 GMT+0800 (China Standard Time)

Absolutely no rush!

Ryan Pendergast · Answer 20 · Sun May 26 2019 21:25:58 GMT+0800 (China Standard Time)

Yup I can try it out on Tuesday

Daniel Nitu · Answer 21 · Sat Jun 15 2019 01:09:41 GMT+0800 (China Standard Time)

In case this is still relevant, I was able to make all 3 free versions of Font Awesome work on both platforms without any alterations to the font files.

I'm using NativeScript 5.4.1 with Angular 7.2.15 and downloaded the latest font files from the official website (I noticed they changed the file names).

Steps:

Add all 3 otf files in src/fonts
Add relevant classes in src/app.css

.fab {
    font-family: "Font Awesome 5 Brands", "Font Awesome 5 Brands-Regular-400";
    font-weight: 400;
}

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

.fas {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Free-Solid-900";
    font-weight: 900;
}

Note that for Android I had to use the exact filename as it appears in src/fonts folder.

Use icon codes as needed (prepend all with &#x and append ;)

<Label class="far" text="Regular: &#xf2b9;"></Label>
<Label class="fas" text="Strong: &#xf2b9;"></Label>
<Label class="fab" text="Brands: &#xf270;"></Label>

iOS

Android

Chris Simpkins · Answer 22 · Sat Jun 15 2019 03:31:40 GMT+0800 (China Standard Time)

@danielnitu ty! Yes we were trying to decide whether to draft a custom script so that these can be used with a new naming scheme. Does the approach that Daniel used in #3 (comment) work for you @rynop @ignaciofuentes ? If so, let's close this and consider this the minimal effort best approach that does not require modification of the fonts as released. :)