fontface font-weight support

[y-nk]

In CSS @font-face has the capacity to overload a font with different font file depending on the style defined in the block such as:

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

@font-face {
  src: url(font2.ttf);
  font-weight: 700;
}

which would naturally switch between font1 and font2 when using a <strong>, for example. I'm trying to achieve that, but it seems i cant - at least i'm not finding an answer yet for that (still searching). I'd like to avoid having to define a complex theme with a font { body, bold } and build a component using this themed-based bold class ; it seems overkill just typing it.

Anybody has a clue how to achieve this? Thanks a lot all!

[y-nk]

It seems doable with the globalFontFace function tho, since we can pass the fontFamily prop there ; but the fontFace doesn't allow this prop.

[alexchantastic]

I'm also looking for this behavior for fontFace. This also applies to having multiple font-style (e.g., italics) associated with the same font-family.

For now, I've settled to use globalFontFace as @y-nk described.

Perhaps it might be nice to be able to provide an array to fontFace which would associate multiple @font-face rules with a single font-family.

const myFont = fontFace([
  {
    src: `local('My Font')`,
    fontStyle: 'normal',
  },
  {
    src: `local('My Font Italic')`,
    fontStyle: 'italic',
  },
]);

[cojoclaudiu]

I'm using like this the font-face and I don't have any problems

import { globalFontFace } from '@vanilla-extract/css';

globalFontFace('Plus Jakarta Sans', {
	fontWeight: 400,
	src: `url('/assets/fonts/PlusJakartaSans/PlusJakartaSans-Regular.ttf') format('truetype')`,
});

globalFontFace('Plus Jakarta Sans', {
	fontWeight: 700,
	src: `url('/assets/fonts/PlusJakartaSans/PlusJakartaSans-Bold.ttf') format('truetype')`,
});

[taylorfsteele]

Just submitted a PR that would allow fontFace to accept an array of font face rules. Thanks @alexchantastic for the idea!

#1114

[askoufis]

I believe both #1114 and #1379 adequately support these use cases.