Switch Inter to inter-ui's complete variable fonts

Fontsource builds its Inter files from Google Fonts' subsets, which omit
most of Inter's OpenType features, including the character variants
(cv03, cv04, cv11) that Tabler enables on body text. They also cover 887
fewer codepoints than the previous Inter files, such as arrows, math
symbols and sub/superscripts.

Serve Inter from inter-ui (4.1.1) instead, which packages the complete
upstream variable fonts with both the weight and optical size axes.
Register them under the 'Inter' family name, as before, so that CSS
which names the font directly continues to work.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

netbox/project-static/package-lock.json

@@ -7,7 +7,6 @@
       "name": "netbox",
       "license": "Apache-2.0",
       "dependencies": {
-        "@fontsource-variable/inter": "5.3.0",
         "@fontsource-variable/roboto-mono": "5.3.0",
         "@graphiql/plugin-explorer": "4.0.6",
         "@mdi/font": "7.4.47",
@@ -20,6 +19,7 @@
         "graphql": "16.12.0",
         "gridstack": "14.0.0",
         "htmx.org": "2.0.10",
+        "inter-ui": "4.1.1",
         "js-cookie": "3.0.8",
         "query-string": "9.5.1",
         "react": "18.3.1",
@@ -734,15 +734,6 @@
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
-    "node_modules/@fontsource-variable/inter": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
-      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
-      "license": "OFL-1.1",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
     "node_modules/@fontsource-variable/roboto-mono": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-mono/-/roboto-mono-5.3.0.tgz",
@@ -3249,6 +3240,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inter-ui": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-4.1.1.tgz",
+      "integrity": "sha512-451h0J29HyOmA+JXgSi/6M12tL7ZCZ8arYKZUXiOXTJpJbAKqJvFh3k5SiV3x7tKe0C0KyrKUUiQIvvZ2PQDcA==",
+      "license": "OFL-1.1",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.17.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.17.0.tgz",

netbox/project-static/package.json

@@ -18,7 +18,6 @@
     "upgrade": "node upgrade.mjs"
   },
   "dependencies": {
-    "@fontsource-variable/inter": "5.3.0",
     "@fontsource-variable/roboto-mono": "5.3.0",
     "@graphiql/plugin-explorer": "4.0.6",
     "@mdi/font": "7.4.47",
@@ -31,6 +30,7 @@
     "graphql": "16.12.0",
     "gridstack": "14.0.0",
     "htmx.org": "2.0.10",
+    "inter-ui": "4.1.1",
     "js-cookie": "3.0.8",
     "query-string": "9.5.1",
     "react": "18.3.1",

netbox/project-static/styles/_variables.scss

@@ -1,7 +1,7 @@
 // Global variables
 
 // Set base fonts
-$font-family-sans-serif: 'Inter Variable', system-ui, sans-serif;
+$font-family-sans-serif: 'Inter', system-ui, sans-serif;
 $font-family-monospace: 'Roboto Mono Variable', monospace;
 
 // Set the navigation sidebar width

netbox/project-static/styles/external.scss

@@ -3,11 +3,26 @@
 @import 'gridstack/dist/gridstack.min.css';
 
 // Fonts (upright and italic variable weights)
-@import '@fontsource-variable/inter/index.css';
-@import '@fontsource-variable/inter/wght-italic.css';
 @import '@fontsource-variable/roboto-mono/index.css';
 @import '@fontsource-variable/roboto-mono/wght-italic.css';
 
+// Inter's complete variable fonts. Fontsource's subsets omit the character variants (cv03, cv04, cv11) that Tabler
+// enables, along with much of Inter's character coverage.
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable/InterVariable.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable/InterVariable-Italic.woff2') format('woff2');
+}
+
 // Material Design Icons, served as WOFF2 only (the package's stylesheet also references EOT, WOFF and TTF)
 @import '@mdi/font/scss/variables';
 @import '@mdi/font/scss/functions';