@design-factory/design-factory 15.2.0

package/styles/scss/components/fonts/_font-faces.mixins.scss

@@ -0,0 +1,525 @@
+@mixin df-fonts-multi-lang-typo-fonts($parent-selector, $body-font-stack, $headings-font-stack) {
+  #{$parent-selector} {
+    font-family: $body-font-stack;
+
+    body {
+      font-family: $body-font-stack;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+      font-family: $headings-font-stack;
+    }
+  }
+}
+
+@mixin df-fonts-multi-lang-font-faces-source-sans-pro-full() {
+  @font-face {
+    font-family: 'Source Sans Pro Full';
+    src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-light.woff2') format('woff2'),
+      url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Source Sans Pro Full';
+    src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-lightitalic.woff2') format('woff2'),
+      url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-lightitalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Source Sans Pro Full';
+    src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-regular.woff2') format('woff2'),
+      url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Source Sans Pro Full';
+    src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-italic.woff2') format('woff2'),
+      url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Source Sans Pro Full';
+    src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bold.woff2') format('woff2'),
+      url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Source Sans Pro Full';
+    src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bolditalic.woff2') format('woff2'),
+      url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bolditalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+  }
+}
+
+@mixin df-fonts-multi-lang-font-faces-amadeus-full() {
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-thin.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-thinitalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-thinitalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-light.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-lightitalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-lightitalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-regular.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-italic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-bold.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Amadeus Full';
+    src: url('#{$font-path}/amadeus-full/amadeus-full-bolditalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-full/amadeus-full-bolditalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+  }
+}
+
+@mixin df-fonts-multi-lang-font-faces-noto-sans() {
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-thinitalic.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-thinitalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-lightitalic.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-lightitalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-italic.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosans-bolditalic.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosans-bolditalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+  }
+}
+
+@mixin df-fonts-multi-lang-font-faces-noto-sans-hebrew() {
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-light.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosanshebrew-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosanshebrew-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    unicode-range: U+0590-05FF;
+    font-display: swap;
+  }
+}
+
+@mixin df-fonts-multi-lang-font-faces-noto-sans-arabic() {
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarabic-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarabic-light.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    unicode-range: U+0600-06FF;
+    font-display: swap;
+  }
+}
+
+@mixin df-fonts-multi-lang-font-faces-noto-sans-georgian() {
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-light.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansgeorgian-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansgeorgian-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    unicode-range: U+10A0-10FF;
+    font-display: swap;
+  }
+}
+
+@mixin df-fonts-multi-lang-font-faces-noto-sans-armenian() {
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-thin.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-light.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-light.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-regular.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Noto Sans';
+    src: url('#{$font-path}/noto/notosansarmenian-bold.woff2') format('woff2'),
+      url('#{$font-path}/noto/notosansarmenian-bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    unicode-range: U+0530-058F;
+    font-display: swap;
+  }
+}

package/styles/scss/components/fonts/_fonts-family.scss

@@ -0,0 +1,98 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.woff') format('woff'),
+    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.ttf') format('truetype'),
+    url('#{$font-path}/source-sans-pro-light/source-sans-pro-light.svg#source_sans_prolight') format('svg');
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.woff') format('woff'),
+    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.ttf') format('truetype'),
+    url('#{$font-path}/source-sans-pro-regular/source-sans-pro-regular.svg#source_sans_proregular') format('svg');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.woff') format('woff'),
+    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.ttf') format('truetype'),
+    url('#{$font-path}/source-sans-pro-semibold/source-sans-pro-semibold.svg#source_sans_prosemibold') format('svg');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff2') format('woff2'),
+    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.woff') format('woff'),
+    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.ttf') format('truetype'),
+    url('#{$font-path}/source-sans-pro-bold/source-sans-pro-bold.svg#source_sans_probold') format('svg');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus';
+  src: url('#{$font-path}/amadeus-thin/amadeus-thin.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-thin/amadeus-thin.woff') format('woff'),
+    url('#{$font-path}/amadeus-thin/amadeus-thin.ttf') format('truetype'),
+    url('#{$font-path}/amadeus-thin/amadeus-thin.svg#amadeusthin') format('svg');
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus';
+  src: url('#{$font-path}/amadeus-bold/amadeus-bold.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-bold/amadeus-bold.woff') format('woff'),
+    url('#{$font-path}/amadeus-bold/amadeus-bold.ttf') format('truetype'),
+    url('#{$font-path}/amadeus-bold/amadeus-bold.svg#amadeusbold') format('svg');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Amadeus';
+  src: url('#{$font-path}/amadeus-regular/amadeus-regular.woff2') format('woff2'),
+    url('#{$font-path}/amadeus-regular/amadeus-regular.woff') format('woff'),
+    url('#{$font-path}/amadeus-regular/amadeus-regular.ttf') format('truetype'),
+    url('#{$font-path}/amadeus-regular/amadeus-regular.svg#amadeusregular') format('svg');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Design-Factory-icon';
+  src: url('#{$font-path}/icon-font/light/df-light-300.woff2') format('woff2'),
+    url('#{$font-path}/icon-font/light/df-light-300.woff') format('woff'),
+    url('#{$font-path}/icon-font/light/df-light-300.ttf') format('truetype'),
+    url('#{$font-path}/icon-font/light/df-light-300.svg#df-light-300') format('svg');
+  font-style: normal;
+  font-weight: 300;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Design-Factory-icon';
+  src: url('#{$font-path}/icon-font/solid/df-solid-900.woff2') format('woff2'),
+    url('#{$font-path}/icon-font/solid/df-solid-900.woff') format('woff'),
+    url('#{$font-path}/icon-font/solid/df-solid-900.ttf') format('truetype'),
+    url('#{$font-path}/icon-font/solid/df-solid-900.svg#df-solid-900') format('svg');
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+}

package/styles/scss/components/fonts/_fonts.scss

@@ -0,0 +1,83 @@
+h1,
+.h1 {
+  // add
+  letter-spacing: $df-h1-letter-spacing;
+}
+h2,
+.h2 {
+  // add
+  letter-spacing: $df-h2-letter-spacing;
+}
+h3,
+.h3 {
+  // add
+  letter-spacing: $df-h3-letter-spacing;
+}
+h4,
+.h4 {
+  // add
+  letter-spacing: $df-h4-letter-spacing;
+}
+h5,
+.h5 {
+  // add
+  letter-spacing: $df-h5-letter-spacing;
+}
+h6,
+.h6 {
+  // add
+  letter-spacing: $df-h6-letter-spacing;
+}
+
+.display-1 {
+  // add
+  letter-spacing: $df-display1-letter-spacing;
+}
+.display-2 {
+  // add
+  letter-spacing: $df-display2-letter-spacing;
+}
+.display-3 {
+  // add
+  letter-spacing: $df-display3-letter-spacing;
+}
+.display-4 {
+  // add
+  letter-spacing: $df-display4-letter-spacing;
+}
+
+caption {
+  // add
+  font-size: $df-caption-font-size;
+  letter-spacing: $df-caption-letter-spacing;
+}
+
+blockquote {
+  //add
+  font-style: $df-blockquote-font-style;
+  letter-spacing: $df-blockquote-letter-spacing;
+  line-height: $df-blockquote-line-height;
+}
+
+mark {
+  //add
+  color: $df-mark-color;
+}
+
+.df-recommend,
+.df-not-recommend {
+  @include font-size($df-recommend-font-size);
+  font-weight: $df-recommend-font-weight;
+  line-height: $df-recommend-line-height;
+  border-bottom: $df-recommend-border-bottom-width solid;
+  padding-bottom: $df-recommend-padding-bottom;
+  margin-bottom: $df-recommend-margin-bottom;
+}
+
+.df-recommend {
+  color: $df-recommend-color;
+}
+
+.df-not-recommend {
+  color: $df-recommend-not-color;
+}