From 27d2d1d3a87a9809d1852b367dcb24add1405770 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Wed, 27 Mar 2024 11:46:33 -0700
Subject: [PATCH] Typography: only use GT Super on supported languages

---
 .../src/Typography/Typography.module.css      | 50 ++++++++++++++++---
 .../src/Typography/Typography.stories.tsx     | 39 +++++++++++++++
 .../tokens/font/base.json                     |  9 ++++
 3 files changed, 90 insertions(+), 8 deletions(-)
 create mode 100644 packages/syntax-design-tokens/tokens/font/base.json

diff --git a/packages/syntax-core/src/Typography/Typography.module.css b/packages/syntax-core/src/Typography/Typography.module.css
index 6da12549..8a2212e8 100644
--- a/packages/syntax-core/src/Typography/Typography.module.css
+++ b/packages/syntax-core/src/Typography/Typography.module.css
@@ -8,8 +8,7 @@
   font-style: normal;
   font-weight: 510;
   src: local("GT-Super-Text-Medium"),
-    url("https://static.cambly.com/fonts/gt-super-medium.woff2");
-  font-display: optional;
+    url("https://static.cambly.com/fonts/gt-super-text-medium-converted.woff2");
 }
 
 @font-face {
@@ -17,19 +16,54 @@
   font-style: normal;
   font-weight: 700;
   src: local("GT-Super-Text-Bold"),
-    url("https://static.cambly.com/fonts/gt-super-bold.woff2");
-  font-display: optional;
+    url("https://static.cambly.com/fonts/gt-super-text-bold-converted.woff2");
 }
 
 .sansSerif {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Helvetica, Arial, sans-serif;
+  font-family: var(--syntax-font-sans-serif);
   margin: 0;
 }
 
 .serif {
-  font-family: "GT Super", -apple-system, system-ui, BlinkMacSystemFont,
-    "Segoe UI", Roboto, Helvetica, Arial, serif;
+  font-family: var(
+    --syntax-font-sans-serif
+  ); /* Intentional, the default is still to use sans-serif, we only use serif for certain languages */
+}
+
+/* GT Super only supports certain languages: https://www.grillitype.com/typeface/gt-super */
+
+/* List of languages we use on Cambly and their support for GT Super
+
+* English: ✅
+* Arabic: ❌
+* Azerbaijani: ✅
+* German: ✅
+* Spanish: ✅
+* French: ✅
+* Italian: ✅
+* Japanese: ❌
+* Korean: ❌
+* Polish: ✅
+* Portuguese: ✅
+* Russian: ❌
+* Thai: ❌
+* Turkish: ✅
+* Vietnamese: ❌
+* Simplified Chinese: ❌
+* Traditional Chinese: ❌
+*/
+
+/* stylelint-disable-next-line selector-max-compound-selectors -- only render serif font for certain languages */
+:lang(en) .serif,
+:lang(az) .serif,
+:lang(fr) .serif,
+:lang(de) .serif,
+:lang(es) .serif,
+:lang(it) .serif,
+:lang(pl) .serif,
+:lang(pt) .serif,
+:lang(tr) .serif {
+  font-family: "GT Super", var(--syntax-font-sans-serif);
   -webkit-font-smoothing: antialiased;
 }
 
diff --git a/packages/syntax-core/src/Typography/Typography.stories.tsx b/packages/syntax-core/src/Typography/Typography.stories.tsx
index 6ea519ec..6cd38553 100644
--- a/packages/syntax-core/src/Typography/Typography.stories.tsx
+++ b/packages/syntax-core/src/Typography/Typography.stories.tsx
@@ -1,5 +1,6 @@
 import { type StoryObj, type Meta } from "@storybook/react";
 import Typography from "./Typography";
+import Box from "../Box/Box";
 
 export default {
   title: "Components/Typography",
@@ -162,6 +163,44 @@ export const colors: StoryObj<typeof Typography> = {
   ),
 };
 
+function SerifCharacterSupportExample() {
+  return (
+    <Box display="flex" gap={3} direction="column">
+      <Typography size={200} fontStyle="serif">
+        English: à, é, ñ
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        Azerbaijani: ə, ı, ş, ü
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        French: à, â, é, è, ê, ë, î, ï, ô, ö, ù, û, ü, ÿ, ç
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        German: ä, ö, ü, ß
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        Spanish: á, é, í, ó, ú, ü, ñ
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        Italian: à, è, é, ì, ò, ó, ù
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        Polish: ą, ć, ę, ł, ń, ó, ś, ź, ż
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        Portuguese: á, â, ã, à, é, ê, í, ó, ô, õ, ú
+      </Typography>
+      <Typography size={200} fontStyle="serif">
+        Turkish: ç, ğ, ı, ö, ş, ü
+      </Typography>
+    </Box>
+  );
+}
+
+export const SerifCharacterSupport: StoryObj<typeof Typography> = {
+  render: () => <SerifCharacterSupportExample />,
+};
+
 export const Inline: StoryObj<typeof Typography> = {
   render: (args) => (
     <>
diff --git a/packages/syntax-design-tokens/tokens/font/base.json b/packages/syntax-design-tokens/tokens/font/base.json
new file mode 100644
index 00000000..46caf403
--- /dev/null
+++ b/packages/syntax-design-tokens/tokens/font/base.json
@@ -0,0 +1,9 @@
+{
+  "syntax": {
+    "font": {
+      "sans-serif": {
+        "value": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
+      }
+    }
+  }
+}