Unable to use fontsource roboto face mixins ( fontsource roboto v5.2.5 )

I am trying to use @fontsource/roboto by importing it with face mixins, offered with the library.

Since the latest version v5.2.5, it adviced to use the 2 libraries @fontsource-utils/scss and @fontsource-variable/roboto.

I tried to implement it but it does not work.

I installed the 2 libraries, and follow the documentation but it does not seem to work. On the other side, it works if i directly import the font css files from the library @fontsource/roboto;

Bellow you can find the repository where i try to make it work. https://github.com/kindy91/angular-app-with-roboto

You can find in https://github.com/kindy91/angular-app-with-roboto/blob/master/src/styles.scss

@use "@fontsource-utils/scss" as fontsource;
@use "@fontsource-variable/roboto/scss" as robotoVariable;

// uncomment the bellow import and it works
// @use "@fontsource/roboto";

@include fontsource.faces($metadata: robotoVariable.$metadata, $weights: 400);

body {
font-family: "Roboto", cursive;
}


if you uncomment the import under uncomment the bellow import and it works, then it works.

The repo is public, so feel free if you want to checkout a fix branch.

Continue reading...