fix: fonts

rob-at-cortex · rob-at-cortex · commit 029204e36974 · 2025-12-30T13:59:20.000Z
diff --git a/README.md b/README.md
@@ -46,7 +46,36 @@ Import only the CSS custom properties (design tokens) and non-Tailwind styles:
 import "cortex-react-components/styles.css";
 ```
 
-#### Step 2: Extend your Tailwind config with our preset
+#### Step 2: Load the Manrope font
+
+This library uses the [Manrope](https://fonts.google.com/specimen/Manrope) font. You need to load it in your application.
+
+**Option A: Google Fonts (HTML)**
+
+Add this to your HTML `<head>`:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
+```
+
+**Option B: Next.js (next/font) - Recommended**
+
+```tsx
+// app/layout.tsx
+import { Manrope } from 'next/font/google';
+
+const manrope = Manrope({ subsets: ['latin'] });
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={manrope.className}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+#### Step 3: Extend your Tailwind config with our preset
 
 ```js
 // tailwind.config.js or tailwind.config.ts
diff --git a/src/styles.css b/src/styles.css
@@ -7,58 +7,16 @@
  * Usage in consuming app:
  * 1. Import this CSS file: import 'cortex-react-components/styles.css';
  * 2. Extend your tailwind.config.js with our preset (see package exports)
+ * 3. Load the Manrope font (e.g., via Google Fonts or self-hosted)
+ * 
+ * To load Manrope font, add to your HTML head:
+ * <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
+ * 
+ * Or in Next.js, use next/font:
+ * import { Manrope } from 'next/font/google';
+ * const manrope = Manrope({ subsets: ['latin'] });
  */
 
-/* Font face declarations */
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./fonts/Manrope-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 300;
-  src: url('./fonts/Manrope-Light.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 200;
-  src: url('./fonts/Manrope-ExtraLight.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 500;
-  src: url('./fonts/Manrope-Medium.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 600;
-  src: url('./fonts/Manrope-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 700;
-  src: url('./fonts/Manrope-Bold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 800;
-  src: url('./fonts/Manrope-ExtraBold.ttf') format('truetype');
-}
-
 /* CSS Custom Properties (Design Tokens) */
 :root {
   --background: 20 14.3% 4.1%;
