diff --git a/package.json b/package.json
index 7d56e550..811d1d84 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,12 @@
   },
   "license": "GPL-2.0",
   "dependencies": {
+    "@fontsource-utils/scss": "^0.2.2",
     "@fontsource/poppins": "^5.0.5",
+    "add": "^2.0.6",
     "lazysizes": "^5.3.2",
-    "oneloop.js": "^5.2.1"
+    "oneloop.js": "^5.2.1",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
     "@wordpress/blocks": "^11.16.0",
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..3b8c2f45 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"
@@ -1892,6 +1899,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"add@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "add@npm:2.0.6"
+  checksum: 10/1d2c0780a660edfc161b7784a846865b28dcd8514cc6042c8e283298f379cd3b150412b67a12603a4ac885912f05759f3e2993c27219f85d1face316ffc0b175
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:^7.1.0, agent-base@npm:^7.1.2":
   version: 7.1.3
   resolution: "agent-base@npm:7.1.3"
@@ -2250,6 +2264,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"
@@ -2257,6 +2272,7 @@ __metadata:
     "@wordpress/dom-ready": "npm:^3.17.0"
     "@wordpress/hooks": "npm:^3.17.0"
     "@wordpress/stylelint-config": "npm:^21.0.0"
+    add: "npm:^2.0.6"
     clean-webpack-plugin: "npm:^4.0.0-alpha.0"
     concurrently: "npm:^8.2.2"
     css-loader: "npm:^5.2.4"
@@ -2301,6 +2317,7 @@ __metadata:
     webpack-manifest-plugin: "npm:5.0.0"
     webpack-merge: "npm:^5.7.3"
     webpackbar: "npm:^5.0.0-3"
+    yarn: "npm:^1.22.22"
   languageName: unknown
   linkType: soft
 
@@ -12161,6 +12178,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yarn@npm:^1.22.22":
+  version: 1.22.22
+  resolution: "yarn@npm:1.22.22"
+  bin:
+    yarn: bin/yarn.js
+    yarnpkg: bin/yarn.js
+  checksum: 10/98d80230beaa81f186b2256dff5ef9dce2dd6073c94299209f8e562da9018cff4275c95c27c788aaa4a9c3c186ea8a9aee9a5b83570696a4c8a9d1fff2d4da3a
+  languageName: node
+  linkType: hard
+
 "yauzl@npm:^2.4.2":
   version: 2.10.0
   resolution: "yauzl@npm:2.10.0"