Vite Guide

To integrate Typeweave fonts into your Vite project (React, Vue, Svelte, etc.), follow the steps below.

1. Installation

First, install the font package you want to use:

npm install @typewe/inter

2. React + Vite

For React projects with Vite, import fonts in your main entry file:

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Then use the font in your CSS:

/* src/index.css */
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

3. Vue + Vite

For Vue projects with Vite, import fonts in your main.ts file:

// src/main.ts
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

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

createApp(App).mount('#app');

Then use the font in your CSS or component styles:

/* src/style.css */
body {
  font-family: 'Inter', sans-serif;
}

/* Or in a component's <style> block */
<style scoped>
h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
</style>

4. Svelte + Vite

For Svelte projects with Vite, import fonts in your main.ts file:

// src/main.ts
import './app.css';
import App from './App.svelte';

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

const app = new App({
  target: document.getElementById('app')!,
});

export default app;

Then use the font in your global CSS or component styles:

/* src/app.css */
:root {
  font-family: 'Inter', sans-serif;
}

/* Or in a component's <style> block */
<style>
  h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
  }
</style>

5. Using with Tailwind CSS

To use Typeweave fonts with Tailwind CSS in Vite, configure your tailwind.config.js:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue,svelte}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        serif: ['Playfair Display', 'serif'],
        mono: ['Roboto Mono', 'monospace'],
      },
    },
  },
  plugins: [],
}

Then use the fonts with Tailwind classes:

function App() {
  return (
    <div>
      <h1 className="font-sans font-bold text-4xl">
        Heading with Inter
      </h1>
      <p className="font-serif italic">
        Paragraph with Playfair Display
      </p>
      <code className="font-mono">
        Code with Roboto Mono
      </code>
    </div>
  );
}