# Fonts Directory

This directory contains 97 popular Google Fonts that have been downloaded for use in the canvas editor application.

## Contents

- **all-fonts.css**: Master CSS file that imports all individual font CSS files
- **001_Open_Sans.css** to **097_Overpass_Mono.css**: Individual CSS files for each font

## Font Categories

### System Fonts (18 fonts)
- Arial, Arial Black, Verdana, Helvetica, Tahoma, Trebuchet MS
- Times New Roman, Georgia, Garamond, Courier New, Brush Script MT
- Palatino, Bookman, Comic Sans MS, Impact, Lucida Sans Unicode
- Geneva, Lucida Console

### Google Fonts (97 fonts)
Popular design fonts including:
- **Sans Serif**: Open Sans, Roboto, Lato, Montserrat, Poppins, Nunito, Inter, etc.
- **Serif**: Playfair Display, Merriweather, Libre Baskerville, Crimson Text, etc.
- **Display**: Bebas Neue, Anton, Russo One, Abril Fatface, etc.
- **Handwriting**: Dancing Script, Pacifico, Caveat, Great Vibes, etc.
- **Monospace**: JetBrains Mono, Fira Code, Source Code Pro, Inconsolata, etc.

## Usage

The fonts are automatically loaded in the application through:

1. **CSS Import**: `all-fonts.css` is imported in `src/App.tsx`
2. **Font List**: Available fonts are managed in `src/utils/fonts.ts`
3. **Font Sidebar**: Users can browse and select fonts in the font sidebar component

## Font Loading

All fonts are loaded from Google Fonts CDN using CSS `@import` statements. This ensures:
- Fast loading times
- Always up-to-date font files
- Proper font rendering across browsers
- Multiple font weights and styles

## License

All fonts are open source and free to use under their respective licenses (primarily SIL Open Font License).

## Adding New Fonts

To add new fonts:
1. Download the CSS file from Google Fonts
2. Add it to this directory
3. Update the import in `all-fonts.css`
4. Add the font name to the array in `src/utils/fonts.ts`