web: Upgrade font to roboto flex

schneefux · Jan 21, 2025 · d4f39e2 · d4f39e2
1 parent 0088c58
commit d4f39e2
Show file tree

Hide file tree

Showing 11 changed files with 10 additions and 321 deletions.
diff --git a/klicker/components/index.css b/klicker/components/index.css
@@ -3,7 +3,7 @@
 @import "tailwindcss/utilities";
 
 @import "./dashboard.css";
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
 
 .dark {
   --color-background: 24 24 27; /* gray-900 */

diff --git a/klicker/tailwind.config.cjs b/klicker/tailwind.config.cjs
@@ -45,7 +45,7 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+        sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
       },
       spacing: {
         120: '30rem',

diff --git a/web/assets/css/fonts.css b/web/assets/css/fonts.css
@@ -1,14 +1,11 @@
-/* roboto-regular - latin */
+// https://gwfh.mranftl.com/fonts/roboto-flex?subsets=latin
+
+/* roboto-flex-regular - latin */
 @font-face {
-  font-family: 'Roboto';
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Roboto Flex';
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
-  src: url('~/assets/fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('~/assets/fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('~/assets/fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('~/assets/fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('~/assets/fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('~/assets/fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+  src: url('~/assets/fonts/roboto-flex-v27-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+       url('~/assets/fonts/roboto-flex-v27-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
diff --git a/web/assets/fonts/roboto-flex-v27-latin-regular.ttf b/web/assets/fonts/roboto-flex-v27-latin-regular.ttf
diff --git a/web/assets/fonts/roboto-flex-v27-latin-regular.woff2 b/web/assets/fonts/roboto-flex-v27-latin-regular.woff2
diff --git a/web/assets/fonts/roboto-v29-latin-regular.eot b/web/assets/fonts/roboto-v29-latin-regular.eot
diff --git a/web/assets/fonts/roboto-v29-latin-regular.svg b/web/assets/fonts/roboto-v29-latin-regular.svg
diff --git a/web/assets/fonts/roboto-v29-latin-regular.ttf b/web/assets/fonts/roboto-v29-latin-regular.ttf
diff --git a/web/assets/fonts/roboto-v29-latin-regular.woff b/web/assets/fonts/roboto-v29-latin-regular.woff
diff --git a/web/assets/fonts/roboto-v29-latin-regular.woff2 b/web/assets/fonts/roboto-v29-latin-regular.woff2
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
@@ -48,7 +48,7 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+        sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
       },
       spacing: {
         120: '30rem',