@symbo.ls/scratch 2.34.29 → 2.34.31

package/dist/cjs/index.js

@@ -4098,6 +4098,7 @@ __export(index_exports, {
   hexToRgbArray: () => hexToRgbArray,
   hexToRgba: () => hexToRgba,
   hslToRgb: () => hslToRgb,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   isScalingUnit: () => isScalingUnit,
   mixTwoColors: () => mixTwoColors,
   mixTwoRgb: () => mixTwoRgb,
@@ -4119,6 +4120,7 @@ __export(index_exports, {
   setEach: () => setEach,
   setFont: () => setFont,
   setFontFamily: () => setFontFamily,
+  setFontImport: () => setFontImport,
   setGradient: () => setGradient,
   setInCustomFontMedia: () => setInCustomFontMedia,
   setMediaTheme: () => setMediaTheme,
@@ -4179,6 +4181,7 @@ __export(utils_exports, {
   hexToRgbArray: () => hexToRgbArray,
   hexToRgba: () => hexToRgba,
   hslToRgb: () => hslToRgb,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   isScalingUnit: () => isScalingUnit,
   mixTwoColors: () => mixTwoColors,
   mixTwoRgb: () => mixTwoRgb,
@@ -4191,6 +4194,7 @@ __export(utils_exports, {
   rgbToHex: () => rgbToHex,
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
+  setFontImport: () => setFontImport,
   setInCustomFontMedia: () => setInCustomFontMedia,
   setScalingVar: () => setScalingVar,
   setSubScalingVar: () => setSubScalingVar,
@@ -4584,15 +4588,26 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
 var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
-var setCustomFont = (name, url, weight) => `
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -4606,6 +4621,15 @@ var getFontFace = (LIBRARY) => {
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
 var getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url);
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || "swap"
+    });
+  }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
   return setCustomFontMedia(name, weights.url);
@@ -5634,7 +5658,21 @@ var import_utils11 = __toESM(require_cjs(), 1);
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
-  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = setCustomFontMedia(key, val.url);
+  }
   return { var: CSSvar, value: val, fontFace };
 };
 var getFontFamily = (key, factory) => {

package/dist/cjs/set.js

@@ -4556,14 +4556,25 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
-var setCustomFont = (name, url, weight) => `
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -5236,7 +5247,21 @@ var import_utils11 = __toESM(require_cjs(), 1);
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
-  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = setCustomFontMedia(key, val.url);
+  }
   return { var: CSSvar, value: val, fontFace };
 };
 var setFontFamily = (val, key) => {

package/dist/cjs/system/font.js

@@ -4371,14 +4371,25 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
-var setCustomFont = (name, url, weight) => `
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -4398,7 +4409,21 @@ var isDev = isNotProduction();
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
-  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = setCustomFontMedia(key, val.url);
+  }
   return { var: CSSvar, value: val, fontFace };
 };
 var getFontFamily = (key, factory) => {

package/dist/cjs/system/index.js

@@ -4577,14 +4577,25 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
-var setCustomFont = (name, url, weight) => `
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -5296,7 +5307,21 @@ var import_utils11 = __toESM(require_cjs(), 1);
 var setFont = (val, key) => {
   const CSSvar = `--font-${key}`;
   if (!val || isArray(val) && !val[0]) return;
-  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = setCustomFontMedia(key, val.url);
+  }
   return { var: CSSvar, value: val, fontFace };
 };
 var getFontFamily = (key, factory) => {

package/dist/cjs/utils/font.js

@@ -26,8 +26,10 @@ __export(font_exports, {
   getFontFaceEachString: () => getFontFaceEachString,
   getFontFaceString: () => getFontFaceString,
   getFontFormat: () => getFontFormat,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
+  setFontImport: () => setFontImport,
   setInCustomFontMedia: () => setInCustomFontMedia
 });
 module.exports = __toCommonJS(font_exports);
@@ -37,15 +39,26 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
 var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
-var setCustomFont = (name, url, weight) => `
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -59,6 +72,15 @@ var getFontFace = (LIBRARY) => {
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
 var getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url);
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || "swap"
+    });
+  }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
   return setCustomFontMedia(name, weights.url);

package/dist/cjs/utils/index.js

@@ -4045,6 +4045,7 @@ __export(utils_exports, {
   hexToRgbArray: () => hexToRgbArray,
   hexToRgba: () => hexToRgba,
   hslToRgb: () => hslToRgb,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   isScalingUnit: () => isScalingUnit,
   mixTwoColors: () => mixTwoColors,
   mixTwoRgb: () => mixTwoRgb,
@@ -4057,6 +4058,7 @@ __export(utils_exports, {
   rgbToHex: () => rgbToHex,
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
+  setFontImport: () => setFontImport,
   setInCustomFontMedia: () => setInCustomFontMedia,
   setScalingVar: () => setScalingVar,
   setSubScalingVar: () => setSubScalingVar,
@@ -4385,15 +4387,26 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
 var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
-var setCustomFont = (name, url, weight) => `
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -4407,6 +4420,15 @@ var getFontFace = (LIBRARY) => {
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
 var getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url);
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || "swap"
+    });
+  }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
   return setCustomFontMedia(name, weights.url);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.34.29",
+  "version": "2.34.31",
   "files": [
     "src",
     "dist"
@@ -25,9 +25,9 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^2.34.29",
-    "@symbo.ls/utils": "^2.34.29",
+    "@domql/utils": "^2.34.31",
+    "@symbo.ls/utils": "^2.34.31",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "90cb8b61065249122ff356c3ea6eb56191c49bfa"
+  "gitHead": "fc336f4a56746a60a487078dd245035c04da0062"
 }

package/src/system/font.js

@@ -7,7 +7,9 @@ import { getActiveConfig } from '../factory.js'
 import {
   getDefaultOrFirstKey,
   getFontFaceEach,
-  setCustomFontMedia
+  isGoogleFontsUrl,
+  setCustomFontMedia,
+  setFontImport
 } from '../utils'
 
 export const setFont = (val, key) => {
@@ -15,9 +17,21 @@ export const setFont = (val, key) => {
 
   if (!val || (isArray(val) && !val[0])) return
 
-  const fontFace = val[0]
-    ? getFontFaceEach(key, val)
-    : setCustomFontMedia(key, val.url)
+  let fontFace
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url)
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || 'swap'
+      })
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val)
+  } else {
+    fontFace = setCustomFontMedia(key, val.url)
+  }
 
   return { var: CSSvar, value: val, fontFace }
 }

package/src/utils/font.js

@@ -7,41 +7,81 @@ export const getDefaultOrFirstKey = (LIBRARY, key) => {
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value
 }
 
-export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
+export const getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split('.').pop().trim()
+  if (['woff2', 'woff', 'ttf', 'otf', 'eot'].includes(ext)) return ext
+  return null
+}
+
+export const isGoogleFontsUrl = (url) =>
+  url &&
+  (url.includes('fonts.googleapis.com') || url.includes('fonts.gstatic.com'))
 
-export const setInCustomFontMedia = str => `@font-face { ${str} }`
+export const setFontImport = (url) => `@import url('${url}');`
 
-export const setCustomFont = (name, url, weight) => `
+export const setInCustomFontMedia = (str) => `@font-face { ${str} }`
+
+export const setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url)
+  const formatStr = format ? ` format('${format}')` : ''
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`
+  font-style: normal;${
+    weight
+      ? `
+  font-weight: ${weight};`
+      : ''
+  }${
+    options.fontStretch
+      ? `
+  font-stretch: ${options.fontStretch};`
+      : ''
+  }${
+    options.fontDisplay
+      ? `
+  font-display: ${options.fontDisplay};`
+      : ''
+  }
+  src: url('${url}')${formatStr};`
+}
 
-export const setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+export const setCustomFontMedia = (
+  name,
+  url,
+  weight,
+  options
+) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`
-// src: url('${url}') format('${getFontFormat(url)}');
 
 export const getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights)
-  return keys.map(key => {
+  return keys.map((key) => {
     const { url, fontWeight } = weights[key]
     return setCustomFont(name, url, fontWeight)
   })
 }
 
-export const getFontFace = LIBRARY => {
+export const getFontFace = (LIBRARY) => {
   const keys = Object.keys(LIBRARY)
-  return keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
+  return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value))
 }
 
 export const getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url)
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || 'swap'
+    })
+  }
   const isArr = weights[0]
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia)
   return setCustomFontMedia(name, weights.url)
 }
 
-export const getFontFaceString = LIBRARY => {
+export const getFontFaceString = (LIBRARY) => {
   const keys = Object.keys(LIBRARY)
-  return keys.map(key => getFontFaceEachString(key, LIBRARY[key].value))
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value))
 }