Assigning font weight values 100-900

Glyphs
1

I'm having an issue when I call (in CSS) my "Thin" font weight by the number I've assigned it (100), but for some reason, it doesn't show and will only go the the next lightest weight "Light" (which is 300). I can't tell if it's a CSS issue or something I'm doing wrong when assigning values in Glyphs. What is the difference between the value you can enter in Master and the value it "preselects" for you in the weight drop down menu in Instances? And why does the preselected value not match the one i entered?

2

Glyphs won’t go below 250. IIRC this is because Windows forces bold on anything under 250.

3

To set the weight of an instance below 250 (or between values Glyphs allows for in the dropdown), you can add a custom parameter to the instance [1].

({ weightClass = 100; })

if you’re loading your font via @font-face or FontFace (javascript), you can also apply a weight to that specific font in your declaration [2]:

@font-face {
  font-family: 'myFont';
  src: url('myFont-webfont.woff2') format('woff2');
  font-weight: 100;
}
1 Like
4

All what @DunwichTypeFounders and @danielgamage said. Only one small addition: the weight filed in the master is only used to determine the interpolation. You can pick any value you like (e.g., the stem width).

1 Like
5

Please note that these two numbers do not have to match. This is explained in the third MM tutorial:
https://www.glyphsapp.com/tutorials/multiple-masters-part-3-setting-up-instances

6

Thanks, @danielgamage, I discovered the Custom Parameter and added it here, is that correct?

When I exported the font, it still wasn’t working on my webpage. I am also exporting it as an OTF only. Do I need to export it as a WOFF or WOFF2 for it to work? I’ve been able to use other fonts on my machine that seem to be desktop fonts only with no issue.

My specific problem is that I am calling the entire font family and weight of 400 for the “body” of the page, but on a certain div, I want the weight to be 100, but it only seems to be able to load the next lightest weight in the family. The other issue is that this is a font that I already had that I CREATED the thinner weight for by hand. So I loaded in the “Light” font that came with the font package and altered it to create a “Thin” version that was lighter. I made sure it was compatible, too, but the weight class for the new “Thin” style seems to be eluding me for now. When I call that specific font and style in the body, it works however, but only if I call it by name, not weight. I am not forcing the “@font-face” yet – just testing locally for now, so it should work with just “font-family”, no?

7

You can check if the weight class was exported properly with OTMaster, it has a free light version. How do you use the font? Are you sure the browser is accessing/can access the correct font file?

For web pages, WOFF is usually the first choice.

8

So you’re installing the font to Font Book (or similar) and just calling it by family name? Did you make sure this isn’t a font cache issue after exporting the new file? I wonder if macOS might still be using the old file you installed with the 250 weight value.

9

When loaded through @font-face, CSS does not read the weightclass value from the font. you have to set it in the @font-face block.