use CharisSIL to display IPA (#464)

enjoy/src/index.css

@@ -3,7 +3,6 @@
 @import "@vidstack/react/player/styles/default/layouts/audio.css";
 @import "@vidstack/react/player/styles/default/layouts/video.css";
 @import "intl-tel-input/build/css/intlTelInput.css";
-@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -80,11 +79,18 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  @font-face {
+    font-family: "CharisSIL";
+    src: url("assets/fonts/CharisSIL-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+  }
 }
 
 @layer components {
   .scroll {
-    @appply scrollbar-thin scrollbar-thumb-primary scrollbar-track-secondary;
+    @apply scrollbar-thin scrollbar-thumb-primary scrollbar-track-secondary;
   }
 }
 

enjoy/tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        code: ['"Source Code Pro"', ...defaultTheme.fontFamily.mono],
+        code: ["CharisSIL", ...defaultTheme.fontFamily.mono],
       },
       colors: {
         border: "hsl(var(--border))",