> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nextd.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Fonts

> Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.

## Overview

Nextd provides flexible font configuration solutions, supporting **Web Safe Fonts** and **Google Fonts** integration to ensure consistent user experience across different browsers and platforms.

<Warning>
  **Important Note**: Nextd currently does not support direct upload of custom font files.
</Warning>

## Web Safe Fonts

### What are Web Safe Fonts

**Web Safe Fonts** are standard font families pre-installed on most operating systems. These fonts ensure text displays consistently across various browsers and platforms, providing reliable cross-platform compatibility.

### Recommended Web Safe Fonts

The following fonts have the best cross-platform compatibility:

| Font Family             | Category   | Best Use Case          |
| ----------------------- | ---------- | ---------------------- |
| **Arial / Helvetica**   | Sans-serif | Body text and headers  |
| **Times New Roman**     | Serif      | Formal documents       |
| **Georgia**             | Serif      | Long-form reading      |
| **Courier New**         | Monospace  | Code display           |
| **Verdana**             | Sans-serif | Screen display         |
| **Tahoma**              | Sans-serif | Compact layouts        |
| **Trebuchet MS**        | Sans-serif | Modern design          |
| **Lucida Sans Unicode** | Sans-serif | Multi-language support |

## Google Fonts Integration

### Method 1: Specify Font by Name

Apply font styles by directly specifying Google font names in prompts.

**Steps:**

1. Clearly specify font name in prompts
2. Refresh the page to confirm the font is displayed correctly

**Example Prompt:**

```
Use Playfair Display font as the font style for the first subtitle
```

### Method 2: Import Font via Link

Use Google Fonts direct links to import and apply fonts.

**Steps:**

1. Visit [Google Fonts](https://fonts.google.com) to get font links
2. Provide complete font link address in prompts

**Example Prompt:**

```
Add this Google font link https://fonts.google.com/specimen/Dancing+Script and apply this font to the third subtitle
```

## Best Practice Recommendations

### Font Selection Strategy

1. **Prioritize Readability** - Ensure selected fonts have good readability across various screen sizes
2. **Maintain Brand Consistency** - Choose fonts that match the overall design style of the project
3. **Consider Loading Performance** - Google Fonts affect page loading speed, use multiple fonts cautiously
4. **Fallback Font Strategy** - Set Web Safe Fonts as fallback options for Google Fonts

### Technical Implementation Points

* Use React's `useEffect` hook to manage font loading
* Set appropriate fallback font stacks for custom fonts
* Consider user experience optimization for font loading states

<Tip>
  Through proper use of **Web Safe Fonts** and **Google Fonts**, you can create professional-looking interface designs with excellent user experience for your Nextd projects.
</Tip>

## Reference Resources

| Resource                    | Description                                                 | Link                                         |
| --------------------------- | ----------------------------------------------------------- | -------------------------------------------- |
| **Example Projects**        | View practical application cases and implementation methods | Internal documentation                       |
| **Technical Documentation** | Deep dive into technical details of font integration        | Nextd docs                                   |
| **Google Fonts**            | Explore rich font library resources                         | [fonts.google.com](https://fonts.google.com) |