Percy is not using custom variable font-family

[Th3S4mur41]

I'm using a local variable font which is copied to the storybook static folder and setting a proper fallback chain as follow:

/* raleway-cyrillic-variable-wghtOnly-normal */
@font-face {
  font-family: 'RalewayVariable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./files/raleway-cyrillic-variable-wghtOnly-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}  
/* raleway-cyrillic-ext-variable-wghtOnly-normal */
@font-face {
  font-family: 'RalewayVariable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./files/raleway-cyrillic-ext-variable-wghtOnly-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}  
/* raleway-latin-variable-wghtOnly-normal */
@font-face {
  font-family: 'RalewayVariable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./files/raleway-latin-variable-wghtOnly-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  
/* raleway-latin-ext-variable-wghtOnly-normal */
@font-face {
  font-family: 'RalewayVariable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./files/raleway-latin-ext-variable-wghtOnly-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}  
/* raleway-vietnamese-variable-wghtOnly-normal */
@font-face {
  font-family: 'RalewayVariable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./files/raleway-vietnamese-variable-wghtOnly-normal.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}  

/* Fallback font */
@font-face {
	font-family: 'Raleway-fallback';
	size-adjust: 104.07000000000009%; /* stylelint-disable-line property-no-unknown */
	ascent-override: 88%;
	descent-override: 20%;
	line-gap-override: 5%;
	src: local('Arial');
}

:where(html) {
  --font-family: 'RalewayVariable', 'Raleway-fallback', sans-serif;
  font-family: var(--font-family);
}

When running storybook, the font is properly being loaded and displayed, but percy screenshots are not even using the sans-serif fallback and use a serif font instead (at least in Chrome and Edge, Firefox uses a sans-serif font):

Any help would be appreciated

[Robdel12]

Hey @Th3S4mur41! Variable font support is OS based and currently Percy's Firefox and Chrome browsers render in Ubuntu. Safari renders in MacOS and Edge renders in Windows.

I would expect the font to be correct in Safari & Edge. Is that true? 🤨

[Th3S4mur41]

Unfortunately, not... Edge is rendering with the same serif font as Chrome.
But even without support for variable fonts, shouldn't all browser at least fallback to Arial as local font or in the absolute worst case to the OS's default sans-serif?

If I block the download of the Woff2 files in storybook, the fallback works in all browsers (Only tested on Windows though).
As mentioned, Firefox is the only browser where the snapshot has a sans-serif font, but that might even be the browser's default, and nothing defined in my stylesheet.
Both Chrome and Edge snapshot have a sans-serif font completely ignoring my stylesheet