feat(web): new fonts (#5165)

* feat(web): new fonts

* remove old fonts and make default font size larger

* fine tunning

web/src/app.css

@@ -23,11 +23,18 @@
     --immich-dark-warning: 245 124 0;
   }
 }
+@font-face {
+  font-family: 'Overpass';
+  src: url('$lib/assets/fonts/overpass/Overpass.ttf') format('truetype-variations');
+  font-weight: 1 999;
+  font-style: normal;
+}
 
 @font-face {
-  font-family: 'Work Sans';
+  font-family: 'Overpass Mono';
-  src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
+  src: url('$lib/assets/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
   font-weight: 1 999;
+  font-style: monospace;
 }
 
 @font-face {
@@ -36,7 +43,7 @@
 }
 
 :root {
-  font-family: 'Work Sans', sans-serif;
+  font-family: 'Overpass', sans-serif;
   /* Used by layouts to ensure proper spacing between navbar and content */
   --navbar-height: calc(theme(spacing.18) + 4px);
 }
@@ -44,6 +51,7 @@
 html {
   height: 100%;
   width: 100%;
+  font-size: 17px;
 }
 
 html::-webkit-scrollbar {

web/src/lib/components/shared-components/scrollbar/scrollbar.svelte

@@ -134,7 +134,7 @@
         {#if segment.hasLabel}
           <div
             aria-label={segment.timeGroup + ' ' + segment.count}
-            class="absolute right-0 bottom-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg font-mono"
+            class="absolute right-0 bottom-0 z-10 pr-5 text-xs dark:text-immich-dark-fg font-immich-mono font-semibold"
           >
             {segment.date.year}
           </div>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -118,7 +118,7 @@
               <p class="text-immich-fg dark:text-immich-dark-fg">
                 {partner.user.name}
               </p>
-              <p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
+              <p class="text-sm text-immich-fg/75 dark:text-immich-dark-fg/75">
                 {partner.user.email}
               </p>
             </div>

web/src/routes/(user)/explore/+page.svelte

@@ -37,7 +37,7 @@
   $: {
     if (innerWidth && screenSize) {
       // Set the number of faces according to the screen size and the div size
-      MAX_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 96) : Math.floor(innerWidth / 112);
+      MAX_ITEMS = screenSize < 768 ? Math.floor(innerWidth / 96) : Math.floor(innerWidth / 120);
     }
   }
 </script>

web/tailwind.config.cjs

@@ -25,6 +25,7 @@ module.exports = {
       },
       fontFamily: {
         'immich-title': ['Snowburst One', 'cursive'],
+        'immich-mono': ['Overpass Mono', 'monospace'],
       },
       spacing: {
         18: '4.5rem',