Fonts (#261)

client/src/components/Conversations/Conversation.jsx

@@ -126,7 +126,7 @@ export default function Conversation({ conversation, retainView }) {
           />
         </div>
       ) : (
-        <div className="absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-gray-900 group-hover:from-[#2A2B32]" />
+        <div className="absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-gray-900 group-hover:from-[#2A2B32] rounded-r-md" />
       )}
     </a>
   );

client/src/style.css

@@ -2,6 +2,110 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-display: swap;
+  font-family: Signifier;
+  font-style: normal;
+  font-weight: 400;
+  src: url("../public/fonts/signifier-light.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Signifier;
+  font-style: italic;
+  font-weight: 400;
+  src: url("../public/fonts/signifier-light-italic.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Signifier;
+  font-style: normal;
+  font-weight: 700;
+  src: url("../public/fonts/signifier-bold.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Signifier;
+  font-style: italic;
+  font-weight: 700;
+  src: url("../public/fonts/signifier-bold-italic.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne;
+  font-style: normal;
+  font-weight: 400;
+  src: url("../public/fonts/soehne-buch.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne;
+  font-style: italic;
+  font-weight: 400;
+  src: url("../public/fonts/soehne-buch-kursiv.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne;
+  font-style: normal;
+  font-weight: 500;
+  src: url("../public/fonts/soehne-kraftig.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne;
+  font-style: italic;
+  font-weight: 500;
+  src: url("../public/fonts/soehne-kraftig-kursiv.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne;
+  font-style: normal;
+  font-weight: 600;
+  src: url("../public/fonts/soehne-halbfett.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne;
+  font-style: italic;
+  font-weight: 600;
+  src: url("../public/fonts/soehne-halbfett-kursiv.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne Mono;
+  font-style: normal;
+  font-weight: 400;
+  src: url("../public/fonts/soehne-mono-buch.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne Mono;
+  font-style: normal;
+  font-weight: 700;
+  src: url("../public/fonts/soehne-mono-halbfett.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Söhne Mono;
+  font-style: italic;
+  font-weight: 400;
+  src: url("../public/fonts/soehne-mono-buch-kursiv.woff2") format("woff2")
+}
+
 /* * {
   box-sizing: border-box;
   outline: 1px solid limegreen !important;

client/tailwind.config.cjs

@@ -9,10 +9,11 @@ module.exports = {
     // colors: {
     //   'gpt-dark-gray': '#343541',
     // },
+    fontFamily: {
+      sans: ['Söhne', 'sans-serif'],
+      mono: ['Söhne Mono', 'monospace'],	
+    },
     extend: {
-      // fontFamily: {
-      //   sans: ['var(--font-sans)', ...fontFamily.sans]
-      // },
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
@@ -52,7 +53,7 @@ module.exports = {
           800: "#06373e",
           900: "#031f29",
         },
-    }
+      }
     }
   },
   plugins: [