# Typography setup
This guide covers how to set up typography in your application, including font loading and Tailwind plugin configuration.
## Google Sans Flex (recommended)
Google Sans Flex is a variable font that provides multiple weights and widths in a single file.
### 1. Load the font
Choose one of the following methods:
#### Option A: HTML link tags
Add to your HTML ``:
```html
```
#### Option B: CSS @import (Tailwind v4)
Import directly in your CSS file - ideal for Tailwind v4's CSS-first approach:
```css
/* Font import must come FIRST */
@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap";
@import "tailwindcss";
@config "./tailwind.config.js";
```
> **Important:** The Google Fonts `@import` must be the first statement in your CSS file. CSS requires `@import` rules to precede all other rules.
>
> **Note:** Google Sans Flex requires the variable font version to support width variations (`font-variation-settings: "wdth"`). Fontsource currently only offers static font weights, which won't work with this typography system.
### 2. Configure Tailwind plugin
```typescript
// tailwind.config.ts
import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf'
export default {
plugins: [
typography({
brands: ['mindvalley'], // or ['b2b'] for B2B projects
}),
],
}
```
### Plugin options
```typescript
typography({
// Class name casing (default: 'kebabCase')
casing: 'kebabCase' | 'camelCase' | 'snakeCase' | 'pascalCase' | 'noCase',
// Responsive breakpoints
breakpoints: {
tablet: '768px', // default: theme('screens.md')
desktop: '1024px', // default: theme('screens.lg')
},
// Optional class prefix
prefix: 'mv-',
// Brands to include
brands: ['mindvalley', 'b2b'],
})
```
### Tailwind v4 Setup
Tailwind v4 uses a CSS-first approach and doesn't require a config file by default. However, to use the typography plugin, you'll need to create a config file and load it with the `@config` directive.
**Step 1: Create `tailwind.config.js`**
```js
// tailwind.config.js
import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf'
export default {
plugins: [
typography({
brands: ['mindvalley'],
}),
],
}
```
**Step 2: Load the config in your CSS**
```css
/* app.css */
@import "tailwindcss";
@config "./tailwind.config.js";
```
**Step 3: Use typography classes as normal**
```html
Welcome
Body text
```
This same process works for the Sharp Grotesk plugin.
### 3. Use typography classes
```html