autoloading webfonts #1004

gulpfile.js

@@ -439,6 +439,7 @@ gulp.task('browser-sync', () => {
 				'/dist/css': `${distDir}/css`,
 				'/dist/js': `${distDir}/js`,
 				'/dist/img': `${srcDir}/img`,
+				'/dist/fonts': `${srcDir}/fonts`,
 				'/static': `${srcDir}/static`,
 			},
 		},
@@ -498,6 +499,15 @@ gulp.task('copy-static', () => {
 		.pipe(gulp.dest(`${demoDir}/static`))
 })
 
+/**
+ * Copy fonts
+ */
+gulp.task('copy-fonts', () => {
+	return gulp
+		.src(`${srcDir}/fonts/**/*`)
+		.pipe(gulp.dest(`${distDir}/fonts`))
+})
+
 /**
  * Copy Tabler dist files to demo directory
  */
@@ -520,6 +530,6 @@ gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
 
 gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
 
-gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
+gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-fonts', 'copy-libs', 'add-banner'))
 gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/))
 gulp.task('build', gulp.series('build-core', 'build-demo'))

src/scss/_variables.scss

@@ -13,15 +13,15 @@ $enable-rfs: false !default;
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: 'Inter' !default;
-$google-font-monospaced: false !default;
+$font-google: null !default;
+$font-google-monospaced: null !default;
+$font-local: 'Inter' !default;
+$font-icons: () !default;
 
-$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-$font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", '')} #{if($font-google, "#{$font-google}, ", '')}") -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
+$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}"), Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
-// EXTERNAL FONTS
-$icon-fonts: () !default;
 
 //Icons
 $icon-stroke-width: 1.5 !default;

src/scss/fonts/_webfonts.scss

-@if $google-font {
-  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google {
+  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-url);
+} @else if $font-local {
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-weight: 300;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-weight: 500;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-weight: 600;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-weight: 700;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff') format('woff');
+  }
 }
 
-@if $google-font-monospaced {
-  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google-monospaced {
+  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-monospaced-url);
 }
 
-@if $icon-fonts {
-  @each $icon-font in $icon-fonts {
+@if $font-icons {
+  @each $icon-font in $font-icons {
     @import url($icon-font);
   }
 }