How to get available font weights?

Question

Is there any way to get list of weights for particular font in JavaScript?

I want to build selector like in Photoshop.

Answer 1

Nope! Whether one typeface is actually a font-weight of another is esoteric knowledge that Javascript has no way of working out. You can define what font-weights a font-family has using CSS @font-face rules, and in a way this kind of illustrates the impossibility of achieving what you're asking.

Immediately below, I've got a pretty standard @font-face setup for a font with 3 weights.

@font-face {
  font-family: Barney;
  src: url(barney_regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: Barney;
  src: url(barney_light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: Barney;
  src: url(barney_bold.ttf);
  font-weight: 500;
}

But knowing that each of those .ttf files represents a different weight of the same font family is arbitrary. Here I've specified it, because I'm aware of it. If an automated service, eg Font Squirrel, had taken those 3 files, it would probably have come out with this:

@font-face {
  font-family: barney_regular;
  src: url(barney_regular.ttf);
}

@font-face {
  font-family: barney_light;
  src: url(barney_light.ttf);
}

@font-face {
  font-family: barney_bold;
  src: url(barney_bold.ttf);
}

Here, these 3 weights have actually all been specified as distinct font families, which is obviously a mistake. But in theory I could do stupider stuff:

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 500;
}

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 300;
}

Above, the same exact typeface is being assigned to 3 different weights. So even if Javascript could detect the relationships within @font-face declarations, like what file is associated with what weight, style & family; how many weights have been specified… It still couldn't tell you whether those resources exist, have been downloaded, accurately represent a different width of the same font.

Web typography has undergone big changes over the past 10 years, but it's still (relatively speaking) a rubbish medium for type-setting.