diff --git a/package.json b/package.json
index 7d56e550..bab325c0 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "license": "GPL-2.0",
   "dependencies": {
+    "@fontsource-utils/scss": "^0.2.2",
     "@fontsource/poppins": "^5.0.5",
     "lazysizes": "^5.3.2",
     "oneloop.js": "^5.2.1"
diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss
index dee0dc3a..0dbeb1a1 100644
--- a/src/scss/03-base/_fonts.scss
+++ b/src/scss/03-base/_fonts.scss
@@ -6,7 +6,9 @@
  *
  * Examples :
  *
- *      1 - Install the font by the command :
+ *      1 - Install the font and the utilities by the command :
+ *          yarn add @fontsource-utils/scss
+ *
  *          // For Classic font
  *          yarn add @fontsource/myFont
  *
@@ -15,20 +17,23 @@
  *
  *      2 - Declare font-face :
  *          // For Classic font
- *          @use "~@fontsource/myFont/scss/mixins" as MyFont;
- *          @include MyFont.faces($weights: (400, 700));
+ *          @use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
+ *          @use "../../../node_modules/@fontsource/myFont/scss/mixins" as MyFont;
+ *          @include fontsource.faces($metadata: MyFont.$metadata, $weights: (400, 700));
  *          ...
  *
  *          // For Variable font
- *          @use "~@fontsource-variable/myFont/scss/mixins" as MyFont;
- *          @include MyFont.faces($axes: all);
+ *          @use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
+ *          @use "../../../node_modules/@fontsource-variable/myFont/scss/mixins" as MyFont;
+ *          @include fontsource.faces($metadata: MyFont.$metadata, $axes: wght);
  *          ...
  */
 
+@use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
 @use "../../../node_modules/@fontsource/poppins/scss/mixins" as Poppins;
 
-@include Poppins.faces($weights: (300, 400, 500, 700), $styles: normal);
-@include Poppins.faces($weights: (300, 400, 500, 700), $styles: italic);
+@include fontsource.faces($metadata: Poppins.$metadata, $weights: (300, 400, 500, 700), $styles: normal);
+@include fontsource.faces($metadata: Poppins.$metadata, $weights: (300, 400, 500, 700), $styles: italic);
 
 // Fallbacks for DM Sans  to improve cls
 // https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins
diff --git a/yarn.lock b/yarn.lock
index dad57470..ff870edd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -628,6 +628,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource-utils/scss@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "@fontsource-utils/scss@npm:0.2.2"
+  checksum: 10/d4092b7564a82806d83e6f2d9a3b5e2b7ee187e52d57a24ae26fe2d074ab4aea205ed729ce2f2ffa3ecd4dfae1089e4003b7ae4e92162c0ac6fa1ff9ad5e0adf
+  languageName: node
+  linkType: hard
+
 "@fontsource/poppins@npm:^5.0.5":
   version: 5.2.5
   resolution: "@fontsource/poppins@npm:5.2.5"
@@ -2250,6 +2257,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "beapi-frontend-framework@workspace:."
   dependencies:
+    "@fontsource-utils/scss": "npm:^0.2.2"
     "@fontsource/poppins": "npm:^5.0.5"
     "@wordpress/blocks": "npm:^11.16.0"
     "@wordpress/browserslist-config": "npm:^6.21.0"