Redesign: Change heading font to Cal Sans UI (#40233)

app/javascript/styles/application.scss

@@ -3,7 +3,7 @@
 @use 'fonts/roboto';
 @use 'fonts/roboto-mono';
 @use 'fonts/inter';
-@use 'fonts/syne';
+@use 'fonts/cal-sans-ui';
 
 @use 'mastodon/reset';
 @use 'mastodon/tokens';

app/javascript/styles/fonts/cal-sans-ui.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Cal Sans UI';
+  src: url('../../fonts/cal-sans-ui/CalSansUI[wght,GEOM].woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}

app/javascript/styles/fonts/syne.scss

@@ -1,7 +0,0 @@
-@font-face {
-  font-family: Syne;
-  src: url('../../fonts/syne/syne-bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}

app/javascript/styles/mastodon/_mixins.scss

@@ -5,7 +5,8 @@
 @mixin type-heading-lg {
   font-family: var(--font-heading);
   font-size: var(--fs-3xl);
-  font-weight: bold;
+  font-weight: 500;
+  font-variation-settings: 'GEOM' 50;
   line-height: var(--lh-tighter);
   letter-spacing: var(--ls-tighter);
 }
@@ -13,7 +14,8 @@
 @mixin type-heading-md {
   font-family: var(--font-heading);
   font-size: var(--fs-2xl);
-  font-weight: bold;
+  font-weight: 500;
+  font-variation-settings: 'GEOM' 50;
   line-height: var(--lh-tighter);
   letter-spacing: var(--ls-tight);
 }
@@ -21,7 +23,8 @@
 @mixin type-heading-sm {
   font-family: var(--font-heading);
   font-size: var(--fs-xl);
-  font-weight: bold;
+  font-weight: 500;
+  font-variation-settings: 'GEOM' 50;
   line-height: var(--lh-tight);
   letter-spacing: var(--ls-tight);
 }

app/javascript/styles/mastodon/basics.scss

@@ -9,7 +9,7 @@ html {
   }
 
   --font-body: mastodon-font-sans-serif, sans-serif;
-  --font-heading: Syne, sans-serif;
+  --font-heading: Cal Sans UI, sans-serif;
   --font-monospace: mastodon-font-monospace, monospace;
 
   &[data-redesign='true'] {