Support font-weight, font-style and font-stretch @font-face properties

[kilobyte2007]

Support font-weight, font-style, and font-stretch @font-face properties as discussed in #53

[kilobyte2007]

I see there's no enough test coverage for the new code I suppose but I am not entirely sure what tests should I implement. Can you point me, please?

[danielroe]

This looks really good. But it doesn't seem to be working in the playground (as in, actually reducing layout shift). Am I just missing something?

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (9099053) 100.00% compared to head (372edc3) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #264   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            2         2           
  Lines          197       230   +33     
  Branches        31        37    +6     
=========================================
+ Hits           197       230   +33     

Files Changed	Coverage Δ
src/css.ts	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kilobyte2007]

@danielroe looking into this now, thanks for the tweaks!

[kilobyte2007]

I have missed the Roboto and Inter font-face definitions in the index.css file, which seems to have fixed the issue in part, but now the issue is that capsize sets the same metrics for the bold font as it sets for the non-bold one (which I think is correct if I verify the numbers here - https://seek-oss.github.io/capsize/).

Does this mean that this PR is useless and the way it worked previously is enough?

@font-face {
  font-family: "Inter fallback";
  src: local("Arial");
  size-adjust: 107.4014%;
  ascent-override: 90.199%;
  descent-override: 22.4836%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
    format('woff2');
}

@font-face {
  font-family: "Inter fallback";
  src: local("Arial");
  size-adjust: 107.4014%;
  ascent-override: 90.199%;
  descent-override: 22.4836%;
  line-gap-override: 0%;
  font-weight: 700;
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiJ-Ek-_EeA.woff2')
    format('woff2');
}

[danielroe]

This may be an upstream issue to raise in capsize in that case. We can pend this PR until there are different metrics available for different weights.

[DamianGlowala]

In theory, there is a way to obtain different metrics for different font weights e.g. through dropping each font file here and collecting relevant metrics from the 'Data' tab. However, as Daniel mentioned, it would be much nicer if capsize provided these alongside the already existing metrics for the normal font weight.

[codecov]

Codecov Report

Attention: Patch coverage is 92.85714% with 2 lines in your changes missing coverage. Please review.

Project coverage is 54.08%. Comparing base (04c5b8e) to head (a35efe3).

Files with missing lines	Patch %	Lines
src/transform.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #264      +/-   ##
==========================================
+ Coverage   50.21%   54.08%   +3.87%     
==========================================
  Files           4        4              
  Lines         235      257      +22     
  Branches       33       40       +7     
==========================================
+ Hits          118      139      +21     
- Misses        117      118       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.