Variable fonts support for fontFace mixin

[kirushenski]

👋 Hi! I am using variable font in my project and wanna to use fontFace mixin to generate @font-face declarations. I am new to ✨ polished, but it seems not possible to do for now 🤔

Variable fonts require more exotic type of src rule with specific format hints. In my case src rule should look like this:

src: url("MyFont.woff2") format("woff2-variations");

But also i have seen suggestions to include variable font like this (in great article by Jason Pamental):

src: url("MyFont.woff2") format("woff2 supports variations"), url("MyFont.woff2") format("woff2-variations");

So with current API the closest way to do it will be:

export const fontsCSS = [
  fontFace({
    fontFamily: 'MyFont',
    fontFilePath: MyFont,
    fileFormats: ['woff2'],
    formatHint: true,
    fontDisplay: 'swap',
    fontWeight: '200 800',
  }),
]

But formatHint adds format('woff2') hint and with that variable font is "buggy": correlation between font weights is broken and animations don't work smoothly. So you need proper hint anyways.

Simple solution for that is to add string[] variation of formatHint property. But this doesn't work with my second example of more complicated type of src. So maybe better way is to make possible to write fully custom src string instead of fontFilePath or change its format...

For now i just don't use fontFace mixin and go with pure CSS in JS solution:

export const fontsCSS = [
  {
    '@font-face': {
      fontFamily: 'MyFont',
      src: `url(${MyFont}) format('woff2-variations')`,
      fontDisplay: 'swap',
      fontWeight: '200 800',
    },
  },
]