Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not renaming font family on MacOS #3

Closed
rynop opened this issue Apr 30, 2019 · 14 comments

Comments

Projects
None yet
3 participants
@rynop
Copy link

commented Apr 30, 2019

Reproduce steps:

  1. Download FontAwesome for web
  2. 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'
  1. Open fa-solid-900.ttf with Font Book app (or another app that displays .ttf font family)
  2. 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.

@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented Apr 30, 2019

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?

@rynop

This comment has been minimized.

Copy link
Author

commented Apr 30, 2019

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!

@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented Apr 30, 2019

It is doing the right thing:

fa-name

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.

@rynop

This comment has been minimized.

Copy link
Author

commented May 1, 2019

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

@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented May 1, 2019

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.

@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented May 1, 2019

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
@rynop

This comment has been minimized.

Copy link
Author

commented May 1, 2019

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';
}
@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented May 1, 2019

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:

n0d76-image

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';
}
@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented May 1, 2019

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.

@rynop

This comment has been minimized.

Copy link
Author

commented May 1, 2019

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:
image

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

@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented May 1, 2019

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.

@rynop

This comment has been minimized.

Copy link
Author

commented May 1, 2019

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!

@rynop rynop closed this May 1, 2019

@chrissimpkins

This comment has been minimized.

Copy link
Owner

commented May 1, 2019

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.

@ignaciofuentes

This comment has been minimized.

Copy link

commented May 14, 2019

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.