Add fontsource conf

config/loaders.js

@@ -13,8 +13,14 @@ module.exports = {
     return [
       /* FontsLoader */ {
         test: /\.(woff|woff2)$/,
-        type: 'asset/resource',
-        include: srcPath + '/fonts',
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: 'assets',
+            },
+          },
+        ],
       },
       /* ImagesLoader */ {
         test: /\.(png|jpe?g|gif|svg)$/,

package.json

@@ -14,6 +14,7 @@
   },
   "license": "GPL-2.0",
   "dependencies": {
+    "@fontsource/poppins": "^4.5.10",
     "lazysizes": "^5.3.2",
     "oneloop.js": "^5.0.0",
     "sharp": "^0.32.0",
@@ -35,6 +36,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-webpack-plugin": "^3.2.0",
+    "file-loader": "^6.2.0",
     "image-webpack-loader": "^7.0.1",
     "js-yaml": "^4.1.0",
     "json2csv": "^5.0.6",

src/scss/01-abstract/_variables.scss

@@ -124,7 +124,7 @@ $base-border-radius: 3px;
 // ----
 // Font Family
 // ----
-$font-family-primary: poppins, sans-serif;
+$font-family-primary: "Poppins", sans-serif;
 
 // ----
 // Font Size

src/scss/03-base/_fonts.scss

@@ -1,10 +1,52 @@
-// Poppins
+/**
+ * Fontsource
+ * Fonts list : https://fontsource.org/
+ * Documentation : https://fontsource.org/docs/sass/mixins
+ * For variable font : https://fontsource.org/docs/sass/variable-mixins
+ *
+ * examples :
+ *
+ *      1 - Install the font by the command :
+ *          yarn add @fontsource/lexend
+ *
+ *      2 - Declare font-face :
+ *          @use "~@fontsource/lexend/scss/mixins" as Lexend;
+ *
+ *          // For Classic font
+ *          @include Lexend.fontFace($weight: 400);
+ *          @include Lexend.fontFace($weight: 400, $style: italic);
+ *          @include Lexend.fontFace($weight: 700);
+ *          ...
+ *
+ *          // For Variable font
+ *          @include Lexend.fontFaceVariable($weight: 100 900);
+ *          ...
+ */
 
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-300", 300);
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-300italic", 300, italic);
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-regular");
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-italic", 400, italic);
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-500", 500);
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-500italic", 500, italic);
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-700", 700);
-@include declare-font-face("Poppins", "../fonts/poppins-v15-latin/poppins-v15-latin-700italic", 700, italic);
+@use "~@fontsource/poppins/scss/mixins" as Poppins;
+
+@include Poppins.fontFace($weight: 300);
+@include Poppins.fontFace($weight: 300, $style: italic);
+@include Poppins.fontFace($weight: 400);
+@include Poppins.fontFace($weight: 400, $style: italic);
+@include Poppins.fontFace($weight: 500);
+@include Poppins.fontFace($weight: 500, $style: italic);
+@include Poppins.fontFace($weight: 700);
+@include Poppins.fontFace($weight: 700, $style: italic);
+
+/**
+ * Custom font here
+ *
+ * examples :
+ *
+ *      // For Classic font
+ *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-regular", 400);
+ *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-regular-italic", 400, italic);
+ *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-bold", 700);
+ *      ...
+ *
+ *      // For Variable font
+ *      @include declare-font-face("My variable font", "../fonts/my-variable-font", 100 950, normal, normal, "woff2-variations");
+ *      ...
+ *
+ */

yarn.lock

@@ -1633,6 +1633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/poppins@npm:^4.5.10":
+  version: 4.5.10
+  resolution: "@fontsource/poppins@npm:4.5.10"
+  checksum: 873ea31740a9819cbc39bf5895159101e87674e3c9da03629b6331e7752b657f3704cd1c6ae81ac9af2f5aa4a9d85847eae8015c926bb48e1f7a5bbacfeca8ee
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -2983,6 +2990,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "beapi-frontend-framework@workspace:."
   dependencies:
+    "@fontsource/poppins": ^4.5.10
     "@wordpress/blocks": ^11.16.0
     "@wordpress/dependency-extraction-webpack-plugin": ^4.0.0
     "@wordpress/dom-ready": ^3.17.0
@@ -2998,6 +3006,7 @@ __metadata:
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     eslint-webpack-plugin: ^3.2.0
+    file-loader: ^6.2.0
     image-webpack-loader: ^7.0.1
     js-yaml: ^4.1.0
     json2csv: ^5.0.6
@@ -5539,6 +5548,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-loader@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "file-loader@npm:6.2.0"
+  dependencies:
+    loader-utils: ^2.0.0
+    schema-utils: ^3.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: faf43eecf233f4897b0150aaa874eeeac214e4f9de49738a9e0ef734a30b5260059e85b7edadf852b98e415f875bd5f12587768a93fd52aaf2e479ecf95fab20
+  languageName: node
+  linkType: hard
+
 "file-type@npm:5.2.0, file-type@npm:^5.2.0":
   version: 5.2.0
   resolution: "file-type@npm:5.2.0"
@@ -5813,7 +5834,7 @@ __metadata:
 
 "fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
   dependencies:
     node-gyp: latest
   conditions: os=darwin
@@ -10515,7 +10536,7 @@ __metadata:
 
 "resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
   version: 1.22.1
-  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
+  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
   dependencies:
     is-core-module: ^2.9.0
     path-parse: ^1.0.7
@@ -12254,11 +12275,11 @@ __metadata:
 
 "typescript@patch:typescript@^4.6.2#~builtin<compat/typescript>":
   version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=23ec76"
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=a1c5e5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: ab417a2f398380c90a6cf5a5f74badd17866adf57f1165617d6a551f059c3ba0a3e4da0d147b3ac5681db9ac76a303c5876394b13b3de75fdd5b1eaa06181c9d
+  checksum: 2eee5c37cad4390385db5db5a8e81470e42e8f1401b0358d7390095d6f681b410f2c4a0c496c6ff9ebd775423c7785cdace7bcdad76c7bee283df3d9718c0f20
   languageName: node
   linkType: hard