Connecting local fonts

[Likvidas]

Hello guys. I need your help. I'm trying to connect local fonts to my project, but it doesn't work.
I would be very grateful if someone could help me.

Bundler - Wepback 5 ( I don't use template Create-React-App) In the config settings:

rules: [
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource',
  }
]

and my code, with the connection of fonts, which doesn't work:

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

export const customFont = fontFace({
	src: 'local(".src/assets/fonts/Roboto-Italic.ttf")',
})

export const layout = style({
	fontFamily: customFont,
})

[alexchantastic]

local() refers to an installed font on the user's machine so local(".src/assets/fonts/Roboto-Italic.ttf") will attempt to look for a font named .src/assets/fonts/Roboto-Italic.ttf installed locally.

If you are looking to point to a locally installed version of Roboto, then local('Roboto') should work.

[cojoclaudiu]

Check my implementation
you need to import after the file in the app root

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')`,
});