search

ingrammicro / puzzle-tokens

Batch create, manage and update Sketch styles and symbols using SCSS/LESS
GNU General Public License v3.0
92 stars 17 forks source link

font-weight:light; not working correctly [Sketch issue] #19

Open pfederi opened 4 years ago

pfederi commented 4 years ago

font-weight:light; is not working with Roboto. Didn't try with other fonts. When I apply the Design Tokens in Sketch the font-weight added is regular.

other Font-Styles as thin or bold are working correctly

MaxBazarov commented 4 years ago

Thanks for the report. I will check it.

MaxBazarov commented 4 years ago

Sketch handles font weight selection by UI and by API in slightly different ways. As a result you can select Light or Thin weight in UI, but in Sketch API both weights are equal (3), so I can't set a valid value.

We met this problem before with other font and the only one solution which we found was to patch the font using FontForge.

MaxBazarov commented 4 years ago

I will continue a research to workaround it somehow.

MaxBazarov commented 4 years ago

Another solution is to uninstall Thin and Ultra Thin fonts. In this case font-weight:200 will select Light font.

MaxBazarov commented 4 years ago

Ok, I submited a bug report to Sketch. Will keep you informed.

tijmenvangurp commented 4 years ago

Sketch handles font weight selection by UI and by API in slightly different ways. As a result you can select Light or Thin weight in UI, but in Sketch API both weights are equal (3), so I can't set a valid value.

We met this problem before with other font and the only one solution which we found was to patch the font using FontForge.

Do you know what the fix is in fontforge? I am running into the same issue.

pfederi commented 4 years ago

@tijmenvangurp I found a workaround for the light Font doing it like this: font-weight: thin; //thin because light is not working for the moment

That workaround is just working if you don't want to use all the font-weights.

barmallion commented 4 years ago

Maybe simple css don't have light font size? https://htmldog.com/references/css/properties/font-weight/

MaxBazarov commented 4 years ago

@tijmenvangurp I tried to forget Fontforge dark magic. Because it's a nightmare. But if I remember correctly — I changed these fields:

Screenshot 2020-04-15 at 23 13 35
tijmenvangurp commented 4 years ago

It might be that sketch is following https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass the OpenType specs? I will try to change the weight names to what the open type has and see if that works.

tijmenvangurp commented 4 years ago

This fix worked for me. I had to update the name in preferred styles from Xbold to extra-bold then if apply font-weight 800 it works :)

Btw, this fix is only needed for the people in the team using the plugin, since sketch does not see it as an actual different font in use.

image

MaxBazarov commented 4 years ago

Wow. Great.

On 16 Apr 2020, at 10:09, Tijmen van Gurp notifications@github.com wrote:

It might be that sketch is following https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass the OpenType specs? I will try to change the weight names to what the open type has and see if that works.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ingrammicro/puzzle-tokens/issues/19#issuecomment-614457094, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMQVAU43FZLJLPXHS3RDJTRM2VI5ANCNFSM4J52T5WA.

tijmenvangurp commented 4 years ago

In the end, I had to change 3 font-weight names. I followed this table and everything works

https://support.invisionapp.com/hc/en-us/articles/115003217203-How-does-Inspect-determine-the-font-weight-displayed-in-my-prototype-