Merge pull request #23440 from netbox-community/23438-fontsource-inter

Closes #23438: Upgrade to Inter 4, and serve the icon font as WOFF2 only

netbox/project-static/build.mjs

@@ -70,7 +70,7 @@ async function buildStyles() {
         silenceDeprecations: ['import'],
       }),
     ],
-    loader: { '.eot': 'file', '.woff': 'file', '.woff2': 'file', '.svg': 'file', '.ttf': 'file' },
+    loader: { '.woff2': 'file', '.svg': 'file' },
   });
 }
 

netbox/project-static/package-lock.json

@@ -7,6 +7,7 @@
       "name": "netbox",
       "license": "Apache-2.0",
       "dependencies": {
+        "@fontsource-variable/roboto-mono": "5.3.0",
         "@graphiql/plugin-explorer": "4.0.6",
         "@mdi/font": "7.4.47",
         "@popperjs/core": "2.11.8",
@@ -18,13 +19,12 @@
         "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",
         "react-dom": "18.3.1",
-        "tom-select": "2.6.2",
-        "typeface-inter": "3.18.1",
-        "typeface-roboto-mono": "1.1.13"
+        "tom-select": "2.6.2"
       },
       "devDependencies": {
         "@eslint/js": "10.0.1",
@@ -734,6 +734,15 @@
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
+    "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",
+      "integrity": "sha512-h5r+KY/6qy8JEOj33JgcrFO81YAnvrc1EAwMpl/EPJLb2OIvOy0/jmB5M7qs7x/uXk5JUP5Ux4LrkeOK7faHkQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@graphiql/plugin-doc-explorer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@graphiql/plugin-doc-explorer/-/plugin-doc-explorer-0.2.2.tgz",
@@ -3231,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",
@@ -4561,18 +4579,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/typeface-inter": {
-      "version": "3.18.1",
-      "resolved": "https://registry.npmjs.org/typeface-inter/-/typeface-inter-3.18.1.tgz",
-      "integrity": "sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q==",
-      "license": "OFL-1.1"
-    },
-    "node_modules/typeface-roboto-mono": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/typeface-roboto-mono/-/typeface-roboto-mono-1.1.13.tgz",
-      "integrity": "sha512-pnzDc70b7ywJHin/BUFL7HZX8DyOTBLT2qxlJ92eH1UJOFcENIBXa9IZrxsJX/gEKjbEDKhW5vz/TKRBNk/ufQ==",
-      "license": "MIT"
-    },
     "node_modules/typescript": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",

netbox/project-static/package.json

@@ -18,6 +18,7 @@
     "upgrade": "node upgrade.mjs"
   },
   "dependencies": {
+    "@fontsource-variable/roboto-mono": "5.3.0",
     "@graphiql/plugin-explorer": "4.0.6",
     "@mdi/font": "7.4.47",
     "@popperjs/core": "2.11.8",
@@ -29,13 +30,12 @@
     "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",
     "react-dom": "18.3.1",
-    "tom-select": "2.6.2",
-    "typeface-inter": "3.18.1",
-    "typeface-roboto-mono": "1.1.13"
+    "tom-select": "2.6.2"
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",

netbox/project-static/styles/_variables.scss

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

netbox/project-static/styles/external.scss

@@ -1,8 +1,38 @@
 // Entry for all 3rd party library imports that do not rely on Tabler or NetBox styles.
-@import '@mdi/font/css/materialdesignicons.min.css';
 @import 'flatpickr/dist/flatpickr.min.css';
 @import 'gridstack/dist/gridstack.min.css';
 
-// Fonts
-@import url('typeface-inter/inter.css');
-@import url('typeface-roboto-mono/index.css');
+// Fonts (upright and italic variable weights)
+@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';
+@font-face {
+  font-family: '#{$mdi-font-name}';
+  src: url('@mdi/font/fonts/materialdesignicons-webfont.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@import '@mdi/font/scss/core';
+@import '@mdi/font/scss/icons';
+@import '@mdi/font/scss/extras';
+@import '@mdi/font/scss/animated';