AI Implementation Guide

For LLMs and AI Assistants: This guide provides structured instructions for implementing Typeweave fonts in web projects. A raw markdown version is available at /typeweave-llm-guide.md

Quick Implementation

NPM/PNPM Installation

# Install a font package
npm install @typewe/inter
# or
pnpm add @typewe/inter

# Import in your JavaScript/TypeScript
import '@typewe/inter/css/index.css';

# Use in CSS
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

CDN Usage

<!-- Add to HTML <head> -->
<link rel="stylesheet" href="https://typeweave.app/api/fonts/inter/css" />

<!-- Use in CSS -->
<style>
  body {
    font-family: 'Inter', sans-serif;
  }
</style>

Next.js App Router

// Install the font
// npm install @typewe/inter

// In your layout.tsx or page.tsx
import '@typewe/inter/css/index.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="font-sans">
        {children}
      </body>
    </html>
  );
}

// In your tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

React/Vite

// In your main.tsx or App.tsx
import '@typewe/inter/css/index.css';

// In your CSS
body {
  font-family: 'Inter', sans-serif;
}

Available Fonts

All fonts are available as NPM packages under the @typewe/* scope.

Font NamePackageCategoryCDN URL
Inter@typewe/interSans Serif/api/fonts/inter/css
Roboto@typewe/robotoSans Serif/api/fonts/roboto/css
Open Sans@typewe/opensansSans Serif/api/fonts/opensans/css
Montserrat@typewe/montserratSans Serif/api/fonts/montserrat/css
Poppins@typewe/poppinsSans Serif/api/fonts/poppins/css
Lato@typewe/latoSans Serif/api/fonts/lato/css
Roboto Mono@typewe/robotomonoMonospace/api/fonts/robotomono/css
Playfair Display@typewe/playfairdisplaySerif/api/fonts/playfairdisplay/css
DM Sans@typewe/dmsansSans Serif/api/fonts/dmsans/css
Raleway@typewe/ralewaySans Serif/api/fonts/raleway/css

View the complete list of fonts at /docs/fonts

Advanced Usage

Variable Fonts

Most Typeweave fonts are variable fonts supporting weights from 100-900. Use CSS font-weight to access any weight.

.heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;  /* Bold */
}

.body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;  /* Regular */
}

.light {
  font-family: 'Inter', sans-serif;
  font-weight: 300;  /* Light */
}

TypeScript Support

// fonts.d.ts
declare module '@typewe/*' {
  const content: string;
  export default content;
}

// Usage in component
import '@typewe/inter/css/index.css';

// Now TypeScript won't complain about the import

Preloading for Performance

<!-- In Next.js app/layout.tsx -->
import { Inter } from '@typewe/inter';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link
          rel="preload"
          href="/api/fonts/inter/css"
          as="style"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Common Patterns

Pattern 1: Multiple Font Pairing

// Import multiple fonts
import '@typewe/inter/css/index.css';
import '@typewe/robotomono/css/index.css';

// In your CSS
body {
  font-family: 'Inter', sans-serif;
}

code, pre {
  font-family: 'Roboto Mono', monospace;
}

Pattern 2: Tailwind CSS Integration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        serif: ['Playfair Display', 'serif'],
        mono: ['Roboto Mono', 'monospace'],
      },
    },
  },
};

// Usage in components
<h1 className="font-serif">Heading</h1>
<p className="font-sans">Body text</p>
<code className="font-mono">Code</code>

Pattern 3: CSS Modules

/* styles.module.css */
@import '@typewe/inter/css/index.css';

.heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2rem;
}

.body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

Pattern 4: Dynamic Font Loading

// Load font dynamically based on user preference
const loadFont = async (fontId: string) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `https://typeweave.app/api/fonts/${fontId}/css`;
  document.head.appendChild(link);
};

// Usage
loadFont('inter');

Troubleshooting

Font not loading?

  • Verify the font package is installed: npm list @typewe/fontname
  • Check the import path is correct: @typewe/fontname/css/index.css
  • Ensure font-family name matches exactly (case-sensitive)
  • Clear browser cache and rebuild your project

TypeScript errors?

  • Add type declarations for CSS imports (see TypeScript Support section)
  • Update tsconfig.json to include "types": ["node"]

CDN not working?

  • Verify the font ID is correct (all lowercase, no spaces)
  • Check network tab for 404 errors
  • Ensure CORS headers are not blocking the request
  • Try the full URL: https://typeweave.app/api/fonts/inter/css