Clarity: UI: Metropolis font doesn't support Latin Extended characters

[wodCZ]

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Every character in every text in Clarity should be rendered with same font.

Actual behavior

Some letters are missing from Metropolis font. These fallback to different font, which is noticeably different. See following demo, which contains different elements with Czech pangram.

Reproduction of behavior

https://plnkr.co/edit/rqWB809UulL74bSkQe0y?p=preview

Environment details

• Angular version: 2.2.0

• Clarity version: 0.7.3:

• OS and version: macOS Sierra 10.12.1

• Browser: Chrome 54.0.2840.98, but possibly all browsers are affected

PS: If you don't plan to support non-english characters, it would be great to mention alternative font in docs, as I can chose any other from webfonts and override it with $clr-font, but it can degrade the overall look of Clarity.

[jaffoneh]

@wodCZ thanks for reporting this and thanks for including a link to reproduce. This is definitely something to fix. Metropolis is an open source font. We want to work with the maintainer of the font and contribute back to it. Will keep this open and will get you an update.

[chrismsimpson]

Hi @wodCZ! I'm the maintainer of Metropolis. Happy to help by updating with any characters required, although Czech should be fully supported. Please ensure you're using the latest version from the Github project (I've noticed sometimes FontSquirrel or other places can be out of date slightly). I've also exported in web font formats (EOF, WOFF & WOFF2) so that you don't have to do this manually. Hope that helps! Otherwise, you can raise an issue here: https://github.com/chrismsimpson/Metropolis/issues

[jaffoneh]

@chrismsimpson thanks for responding here! We're in the process of upgrading to Release 8 of Metropolis if that helps: Notice issue #199.

[adityarb88]

Hi @chrismsimpson. I upgraded to the Release 8 version of the Metropolis font but I still see this issue with the Light font. Am attaching an image below with P0 using the font-weight: 200 with font-size: 20px and P1 using font-weight: 400

I downloaded the font from here: https://github.com/chrismsimpson/Metropolis/releases/tag/r8
and then used font squirrel to encode it into the base64 format.

Do you know what might be causing this issue?

[adityarb88]

Removing the milestone based on the above comment until we can fix the issue.

cc: @jaffoneh

[adityarb88]

Adding a image of one more test that @wodCZ mentioned in the Plnkr link. This is with Metropolis upgraded to r8

[chrismsimpson]

Hey @adityarb88, I'm guessing maybe this is related to the base64 encode tool on font squirrel? Have you tried:

• Using a non base64 embedded version
• Generating base64 version from different sources (I've provided exports for UFO, OTF, TTF, EOF, WOFF & WOFF2 in the repo)

[adityarb88]

Hey @chrismsimpson. Thanks for the quick reply. I can try using different sources from the exports that you have provided and convert them into base64 version and test again. I have only tried converting TTF and OTF till now.

Regarding the first option, we want to use the base64 embedded version so that our users don't have to request/download/manage the font separately. I can discuss this again with @mathisscott but I think this way is more preferable for us.

cc: @jaffoneh

EDIT: I also want to try using the font directly and see if this issue is actually with the base64 encode. Will test and post the test results here.

[chrismsimpson]

I think I've pinpointed the issue.. In the Font Squirrel Generator, ensure that 'No subsetting' is selected ('Basic Subsetting' is the default) otherwise you'll only end up with a basic Latin subset of the typeface in the Font Squirrel export.

[adityarb88]

Thanks a lot @chrismsimpson! This is really helpful. I will try this tomorrow and post an update here.

[adityarb88]

This is what I see now:

Most of the characters look good. The ones that might have an issue are the copyright, registered and a few other characters on the thin font (last and second last line of the card in P0).

Another Test:

I tried different combinations while generating the base64 font using Font Squirrel and also tried using different sources of the font but I still saw an issue with those few characters. Other than that everything looks good.

I will check with @jaffoneh if I can proceed with the upgrade to Release 8 of Metropolis.

[chrismsimpson]

Hi @adityarb88, the issues you've outlined above is more due to the fact that these charachters/glyphs are missing in the actual typeface. I'd be happy to work through them if you can raise an issue here of what missing characters you need. The glyph chart generated by Font Squirrel should give you and indication of whats missing, but there are no copyright, registered trademark, Greek or Cyrillic glyphs currently.

[jaffoneh]

Thanks @chrismsimpson for the quick responses. @adityarb88: if you could file a bug on Metropolis to add those characters that would be great and in the meantime, we should upgrade to Release 8 next week based on the above.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.