Use the system fonts and drop the bundled Geist font (#2938)

.changeset/docs-inter-font.md

@@ -1,5 +0,0 @@
----
-"@tabler/docs": patch
----
-
-Removed the Inter font import from `DocsLayout.astro`, the docs now use the Geist font that ships with Tabler.

.changeset/geist-fonts.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/docs": patch
----
-
-Added the Geist and Geist Mono fonts as the default `$font-family-sans-serif` and `$font-family-monospace`.

.changeset/remove-inter-font-import.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": patch
-"@tabler/docs": patch
----
-
-Removed the unused Inter web font `@import` from `BaseLayout`, since Geist ships with the CSS.

.changeset/system-fonts.md

@@ -0,0 +1,7 @@
+---
+"@tabler/core": minor
+"@tabler/preview": patch
+"@tabler/docs": patch
+---
+
+Use the system fonts as the default `$font-family-sans-serif` and `$font-family-monospace`. Tabler no longer bundles a web font, so no font files are downloaded.

core/.build/import-fonts.ts

@@ -1,44 +0,0 @@
-#!/usr/bin/env node
-
-import { cpSync, existsSync, mkdirSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
-import { join, dirname } from 'node:path'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-const fromDir = join(__dirname, '..', 'node_modules/geist/dist/fonts')
-const toDir = join(__dirname, '..', 'fonts')
-
-if (!existsSync(toDir)) {
-  mkdirSync(toDir, { recursive: true })
-}
-
-const monoFrom = join(fromDir, 'geist-mono')
-const monoTo = join(toDir, 'geist-mono')
-
-if (existsSync(monoFrom)) {
-  if (!existsSync(monoTo)) {
-    mkdirSync(monoTo, { recursive: true })
-  }
-
-  cpSync(monoFrom, monoTo, { recursive: true, dereference: true })
-
-  console.log(`Successfully copied geist-mono fonts`)
-} else {
-  console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
-}
-
-const sansFrom = join(fromDir, 'geist-sans')
-const sansTo = join(toDir, 'geist-sans')
-
-if (existsSync(sansFrom)) {
-  if (!existsSync(sansTo)) {
-    mkdirSync(sansTo, { recursive: true })
-  }
-
-  cpSync(sansFrom, sansTo, { recursive: true, dereference: true })
-
-  console.log(`Successfully copied geist-sans fonts`)
-} else {
-  console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)
-}

core/package.json

@@ -23,11 +23,9 @@
     "js:min": "concurrently \"pnpm run js:min:standalone\" \"pnpm run js:min:theme\"",
     "js:min:standalone": "concurrently \"terser dist/js/tabler.js --compress --mangle --source-map \\\"content=dist/js/tabler.js.map,filename=dist/js/tabler.min.js.map,url=tabler.min.js.map\\\" -o dist/js/tabler.min.js\" \"terser dist/js/tabler.esm.js --module --compress --mangle --source-map \\\"content=dist/js/tabler.esm.js.map,filename=dist/js/tabler.esm.min.js.map,url=tabler.esm.min.js.map\\\" -o dist/js/tabler.esm.min.js\"",
     "js:min:theme": "concurrently \"terser dist/js/tabler-theme.js --compress --mangle --source-map \\\"content=dist/js/tabler-theme.js.map,filename=dist/js/tabler-theme.min.js.map,url=tabler-theme.min.js.map\\\" -o dist/js/tabler-theme.min.js\" \"terser dist/js/tabler-theme.esm.js --module --compress --mangle --source-map \\\"content=dist/js/tabler-theme.esm.js.map,filename=dist/js/tabler-theme.esm.min.js.map,url=tabler-theme.esm.min.js.map\\\" -o dist/js/tabler-theme.esm.min.js\"",
-    "copy": "concurrently \"pnpm run copy:img\" \"pnpm run copy:libs\" \"pnpm run copy:fonts\"",
+    "copy": "concurrently \"pnpm run copy:img\" \"pnpm run copy:libs\"",
     "copy:img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "copy:libs": "tsx .build/copy-libs.ts",
-    "copy:fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
-    "import-fonts": "tsx .build/import-fonts.ts",
     "watch": "concurrently \"pnpm run watch:css\" \"pnpm run watch:js\"",
     "watch:css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css:dev\"",
     "watch:js": "nodemon --watch js/ --ext ts,js --exec \"pnpm run js:build\"",
@@ -264,7 +262,6 @@
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.7.6",
     "fullcalendar": "^6.1.21",
-    "geist": "1.7.2",
     "hugerte": "^1.0.12",
     "imask": "^7.6.1",
     "jsvectormap": "^1.7.0",

core/scss/_core.scss

@@ -32,7 +32,6 @@
 @forward 'props';
 
 @forward 'fonts/webfonts';
-@forward 'fonts/geist';
 
 @forward 'layout/root';
 @forward 'layout/animations';

core/scss/_variables.scss

@@ -381,8 +381,8 @@ $font-google: null !default;
 $font-google-monospaced: null !default;
 $font-icons: () !default;
 
-$font-family-sans-serif: ('Geist', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
+$font-family-sans-serif: (system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
-$font-family-monospace: ('Geist Mono', Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
+$font-family-monospace: (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
 $font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
 $font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
 

core/scss/fonts/_geist.scss

@@ -1,205 +0,0 @@
-// Geist Sans Font Family
-@use '../config' as *;
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 100;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 200;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 300;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 400;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 500;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 600;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 700;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 800;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 900;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
-  font-display: swap;
-}
-
-// Geist Sans Variable Font
-@font-face {
-  font-family: Geist;
-  font-style: normal;
-  font-weight: 100 900;
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
-  font-display: swap;
-}
-
-// Geist Mono Font Family
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 100;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 200;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 300;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 400;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 500;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 600;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 700;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 800;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 900;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
-  font-display: swap;
-}
-
-// Geist Mono Variable Font
-@font-face {
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 100 900;
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
-  font-display: swap;
-}

docs/content/ui/getting-started/upgrade.mdx

@@ -246,7 +246,7 @@ Bootstrap compiles from `scss/bootstrap/` now, so the partials that used to brid
   );
 ```
 
-Geist is embedded through `@font-face` rules in `tabler.css`, and the font files ship in `dist/fonts/`. If you serve the CSS from another folder, set `$assets-base` so the `../fonts/` paths still resolve, or override `--tblr-font-sans-serif` to use your own font.
+Tabler no longer ships a web font. The default stack uses the system font of the device, so nothing is downloaded. To use your own font, override `--tblr-font-sans-serif`.
 
 ## Renamed classes
 
@@ -267,7 +267,7 @@ Old|New|Status
 
 These changes are not breaking, but they change how a page looks. Check your screens after the upgrade.
 
-- **Fonts** — Geist and Geist Mono are the new defaults. To keep your old stack, set `--tblr-font-sans-serif`.
+- **Fonts** — the defaults are now the system fonts of the device, instead of Inter. To keep your old stack, set `--tblr-font-sans-serif`.
 - **Shadows** — the `--tblr-shadow-*` tokens use a new `xs` to `2xl` scale, plus `overlay`, with softer defaults.
 - **Colors** — body text is lighter, dark mode borders and disabled inputs are easier to see, and `--tblr-gray-*-fg` tokens now map straight to `--tblr-gray-*`.
 - **Links** — in dark mode, links use a lighter tint of the primary color, so they meet the 4.5:1 contrast ratio on dark surfaces. Override `--tblr-link-color` to change it.

pnpm-lock.yaml

@@ -154,9 +154,6 @@ importers:
       fullcalendar:
         specifier: ^6.1.21
         version: 6.1.21
-      geist:
-        specifier: 1.7.2
-        version: 1.7.2(next@16.2.10(@babel/core@7.29.7(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.103.1))
       hugerte:
         specifier: ^1.0.12
         version: 1.0.12
@@ -3078,11 +3075,6 @@ packages:
     resolution: {integrity: sha512-LVbzjD4WA6UP5B1UnP8wuaXJiLnqMdM/E4fiJXTJ5haJ5b/MBNsK29h2fm6swEoQaVQjvYFWKLE2RanyZIoRVQ==}
     engines: {node: '>=10'}
 
-  geist@1.7.2:
-    resolution: {integrity: sha512-Gu5lDFa3pLRyoBlBPf0QIFHVdWAnpco7fS1bJm41jyLPFoguBgiubseUN2oLXMgqZ7uxAxDoXcHMhCY/fOTTgg==}
-    peerDependencies:
-      next: '>=13.2.0'
-
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -6550,7 +6542,8 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     optional: true
 
-  '@next/env@16.2.10': {}
+  '@next/env@16.2.10':
+    optional: true
 
   '@next/swc-darwin-arm64@16.2.10':
     optional: true
@@ -6883,6 +6876,7 @@ snapshots:
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
+    optional: true
 
   '@tabler/icons@3.46.0': {}
 
@@ -7634,7 +7628,8 @@ snapshots:
     dependencies:
       source-map: 0.6.1
 
-  client-only@0.0.1: {}
+  client-only@0.0.1:
+    optional: true
 
   clipboard@2.0.11:
     dependencies:
@@ -8132,10 +8127,6 @@ snapshots:
 
   fuse.js@7.4.2: {}
 
-  geist@1.7.2(next@16.2.10(@babel/core@7.29.7(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.103.1)):
-    dependencies:
-      next: 16.2.10(@babel/core@7.29.7(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.103.1)
-
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -9496,6 +9487,7 @@ snapshots:
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
+    optional: true
 
   nice-try@1.0.5: {}
 
@@ -9746,6 +9738,7 @@ snapshots:
       nanoid: 3.3.18
       picocolors: 1.1.1
       source-map-js: 1.2.1
+    optional: true
 
   postcss@8.5.24:
     dependencies:
@@ -9814,12 +9807,14 @@ snapshots:
     dependencies:
       react: 19.2.7
       scheduler: 0.27.0
+    optional: true
 
   react-is@18.3.1: {}
 
   react-is@19.2.7: {}
 
-  react@19.2.7: {}
+  react@19.2.7:
+    optional: true
 
   read-pkg-up@7.0.1:
     dependencies:
@@ -10140,7 +10135,8 @@ snapshots:
 
   sax@1.6.0: {}
 
-  scheduler@0.27.0: {}
+  scheduler@0.27.0:
+    optional: true
 
   select@1.1.2: {}
 
@@ -10418,6 +10414,7 @@ snapshots:
       react: 19.2.7
     optionalDependencies:
       '@babel/core': 7.29.7(supports-color@10.2.2)
+    optional: true
 
   stylelint-config-recess-order@5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
     dependencies: