**Font Component — LLM Reference**
`Font` declares a custom web font using `@font-face` for use in email templates. It provides proper fallback handling for Outlook via MSO conditional comments.
---
## Position in the Document Tree
`Font` is **not** placed in the main body (`DocumentTree`). It must be used inside the email `` section.
```
{/* Content goes here */}
```
---
## ComponentNode JSON Structure
```json
{
"id": "unique-string-id",
"type": "FontComponent",
"config": {
"fontFamily": "Roboto",
"fallbackFontFamily": "Arial",
"webFont": {
"url": "https://fonts.gstatic.com/s/roboto/...woff2",
"format": "woff2"
},
"fontWeight": 400,
"fontStyle": "normal"
}
}
```
---
## `FontConfig` — Full Property Reference
| Property | Type | Required | Default | Description |
|-----------------------|-------------------------------------------|----------|-------------|-----------|
| `fontFamily` | `string` | Yes | — | Primary font family name (e.g. `"Roboto"`) |
| `fallbackFontFamily` | `string \| string[]` | No | — | One or more fallback fonts |
| `webFont` | `WebFont` object | No | — | Web font file details |
| `fontWeight` | `number \| string` | No | `400` | Font weight |
| `fontStyle` | `"normal" \| "italic" \| "oblique"` | No | `"normal"` | Font style |
### `WebFont` Structure
```json
"webFont": {
"url": "https://fonts.gstatic.com/...woff2",
"format": "woff2" | "woff" | "truetype" | "opentype" | "svg" | "embedded-opentype"
}
```
---
## How It Works
- Generates a proper `@font-face` rule when `webFont` is provided.
- Automatically adds an MSO conditional comment for Outlook fallback.
- Creates a stable CSS class (`font-xxx`) that can be used in text components.
- Uses `font-display: swap` for better loading performance.
- Safe for use in email ``.
---
## React Usage
```tsx
import Font from './Font';
```
---
## Common Patterns & Examples
### 1. Standard Google Font (Roboto)
```json
{
"id": "font_roboto",
"type": "FontComponent",
"config": {
"fontFamily": "Roboto",
"fallbackFontFamily": ["Helvetica", "Arial", "sans-serif"],
"webFont": {
"url": "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
"format": "woff2"
},
"fontWeight": 400
}
}
```
### 2. Bold variant
```json
{
"id": "font_roboto_bold",
"type": "FontComponent",
"config": {
"fontFamily": "Roboto",
"webFont": { ... },
"fontWeight": 700
}
}
```
### 3. System font declaration (no web font)
```json
{
"id": "font_system",
"type": "FontComponent",
"config": {
"fontFamily": "Helvetica Neue",
"fallbackFontFamily": ["Helvetica", "Arial", "sans-serif"],
"fontWeight": 400
}
}
```
### 4. Italic variant
```json
{
"id": "font_italic",
"type": "FontComponent",
"config": {
"fontFamily": "Roboto",
"webFont": { ... },
"fontWeight": 400,
"fontStyle": "italic"
}
}
```
---
## Rules & Constraints
- `fontFamily` is **required**.
- Always provide `fallbackFontFamily` for best compatibility.
- Use reliable font hosting (Google Fonts, Bunny Fonts, self-hosted, etc.).
- Declare all font weights and styles you plan to use as separate `Font` components.
- After declaring a font, reference it using the `fontFamily` name in `Text` or `Heading` components.
- `webFont` is optional — omit it if you only want to declare a system font stack.