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

app/javascript/fonts/cal-sans-ui/OFL.txt

@@ -1,8 +1,9 @@
-Copyright 2017 The Syne Project Authors (https://gitlab.com/bonjour-monde/fonderie/syne-typeface)
+Copyright (c) 2025, Mark Davis <mark@wordmark.nyc> <https://www.designermarkdavis.com>, 
+with Font "Cal Sans UI" and “Cal Sans Text”. Commissioned by Peer Richelsen for Cal.com <https://refer.cal.com/davis>.
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
-https://scripts.sil.org/OFL
+http://scripts.sil.org/OFL
 
 
 -----------------------------------------------------------

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'] {