Installation

1. Choose a Package

Select the font package you wish to install. Each font package corresponds to a specific font. Browse available fonts to see all options.

2. Install the Package

Use your preferred package manager to install the font package. For example, to install the Inter font, run the following command:

npm install @typewe/inter

Note: Alternatively, you can download the font files yourself from each package directory.

3. Import the Font

In your application's entry file, page, or site component, import the font package.

Default Import

The most straightforward way to import a font is using its package name directly. This will import all available weights and styles:

import "@typewe/inter/css/index.css"; // Imports all weights 100-900

4. TypeScript Configuration

If you're using TypeScript, you may encounter errors when importing CSS files due to TypeScript's noUncheckedSideEffects flag. To resolve this, add ambient module declarations to your project.

Create a global TypeScript declaration file (e.g., src/globals.d.ts) and include the following:

// ./src/globals.d.ts
declare module "*.css";
declare module "@typewe/*" {}

Note: If you're using a bundler like Vite or a framework that handles CSS imports automatically, you likely won't need to do this.

5. Use in CSS

Once the font is imported, you can reference it in your CSS stylesheets, CSS Modules, or CSS-in-JS using the font family name.

body {
  font-family: "Inter", sans-serif;
  font-weight: 400; /* Any weight from 100-900 available */
}

h1 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: italic; /* Italic styles also available */
}