Parse font faces and consider font weight

[Sergiu Cazac]

🆒 Your use case

Sometimes we have this setup:

@font-face {
    font-family: 'Biennale';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('~/assets/fonts/Biennale-Book.woff2') format('woff2'),
    url('~/assets/fonts/Biennale-Book.woff') format('woff');
}

@font-face {
    font-family: 'Biennale';
    font-weight: 500;
    font-display: swap;
    src: url('~/assets/fonts/Biennale-Medium.woff2') format('woff2'),
    url('~/assets/fonts/Biennale-Medium.woff') format('woff');
}

When fontaine is parsing the font-face it creates the override/fallback font-face without accounting for the weight.

@font-face {
  font-family: "Biennale override";
  src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
  ascent-override: 94.4%;
  descent-override: 24.5%;
  line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Book.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Book.woff') format('woff');
}
@font-face {
  font-family: "Biennale override";
  src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
  ascent-override: 96.7%;
  descent-override: 26.5%;
  line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 500;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Medium.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Medium.woff') format('woff');
}

🆕 The solution you'd like

We should probably add weight parsing, we should just probably parse it with regexp and add it on the created weight/override.

Expected result would be:

@font-face {
    font-family: "Biennale override";
    font-weight: 400;
    font-style: normal;
    src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
    ascent-override: 94.4%;
    descent-override: 24.5%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Book.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Book.woff') format('woff');
}
@font-face {
    font-family: "Biennale override";
    font-weight: 500;
    font-display: swap;
    src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
    ascent-override: 96.7%;
    descent-override: 26.5%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 500;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Medium.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Medium.woff') format('woff');
}

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

[lewisakura]

Encountered this myself, funnily enough. Using Inter with weights 400/700, but Fontaine doesn't have a weight specifier so whilst it works for the body content, there are still significant layout shifts for headers.

[Sergiu Cazac]

I've actually played with it and made it work locally, so can make a PR. @danielroe what do you think about this?

[Daniel Roe]

@kilobyte2007 Would love that!

[Domenico Maresca]

+1

[Sergiu Cazac]

@sermagnus there is an open PR #264 and it works but it seems like it won't work like we expected it to work because capsize doesn't provide the metrics needed here.