156 lines
2.9 KiB
Plaintext
156 lines
2.9 KiB
Plaintext
---
|
|
title: "Font Management"
|
|
description: "Manage Google Fonts and custom font uploads"
|
|
---
|
|
|
|
# Font Management
|
|
|
|
A comprehensive font system with 70+ Google Fonts and custom font upload support.
|
|
|
|
## Features
|
|
|
|
- 70+ curated Google Fonts
|
|
- Custom font upload (.ttf, .otf, .woff)
|
|
- Full Bangla language support
|
|
- Live preview before applying
|
|
- Search and filter by category
|
|
- Reusable font selector component
|
|
|
|
## Admin URL
|
|
|
|
| Page | URL |
|
|
|------|-----|
|
|
| Font Management | `/admin/settings/fonts` |
|
|
|
|
## Using Fonts
|
|
|
|
### Upload Custom Font
|
|
|
|
<Steps>
|
|
<Step title="Open Font Management">
|
|
Go to `/admin/settings/fonts`
|
|
</Step>
|
|
<Step title="Upload">
|
|
- Enter font name (e.g., "Kalpurush")
|
|
- Select `.ttf` file (max 5MB)
|
|
- Click **Upload Font**
|
|
</Step>
|
|
<Step title="Use">
|
|
Font appears in all font selectors with a purple "Custom" badge
|
|
</Step>
|
|
</Steps>
|
|
|
|
### Apply Fonts to Content
|
|
|
|
1. Edit any section (Header, About Me, etc.)
|
|
2. Find the font selector dropdown
|
|
3. Search or browse fonts
|
|
4. Select your font
|
|
5. Preview updates in real-time
|
|
6. Save changes
|
|
|
|
## Available Google Fonts
|
|
|
|
### Serif Fonts
|
|
- Playfair Display
|
|
- Merriweather
|
|
- Lora
|
|
- Crimson Text
|
|
- Libre Baskerville
|
|
- Cormorant Garamond
|
|
|
|
### Sans-Serif Fonts
|
|
- Roboto
|
|
- Open Sans
|
|
- Lato
|
|
- Montserrat
|
|
- Poppins
|
|
- Inter
|
|
- Nunito
|
|
|
|
### Display Fonts
|
|
- Bebas Neue
|
|
- Oswald
|
|
- Raleway
|
|
- Abril Fatface
|
|
- Righteous
|
|
|
|
### Bangla Fonts
|
|
- Noto Sans Bengali
|
|
- Noto Serif Bengali
|
|
- Hind Siliguri
|
|
- Tiro Bangla
|
|
- Mukta
|
|
- Baloo Da 2
|
|
|
|
## Font Selector Component
|
|
|
|
The `FontSelector` component is reusable across admin pages:
|
|
|
|
```jsx
|
|
import FontSelector from '../components/FontSelector/FontSelector';
|
|
|
|
<FontSelector
|
|
value={selectedFont}
|
|
onChange={setSelectedFont}
|
|
label="Title Font"
|
|
previewText="Preview Text"
|
|
/>
|
|
```
|
|
|
|
### Props
|
|
|
|
| Prop | Type | Description |
|
|
|------|------|-------------|
|
|
| `value` | string | Current font value |
|
|
| `onChange` | function | Callback when font changes |
|
|
| `label` | string | Label text |
|
|
| `previewText` | string | Text to show in preview |
|
|
|
|
## Where Fonts Are Used
|
|
|
|
| Section | Font Options |
|
|
|---------|--------------|
|
|
| Header | Name, Roles, Description |
|
|
| About Me | Vertical Name |
|
|
| Blog | Title, Content |
|
|
| Projects | Title, Content |
|
|
|
|
## Database Schema
|
|
|
|
### custom_fonts Collection
|
|
|
|
```javascript
|
|
{
|
|
name: "Kalpurush",
|
|
fileId: "abc123",
|
|
fileUrl: "https://cloud.appwrite.io/v1/storage/..."
|
|
}
|
|
```
|
|
|
|
## Recommended Bangla Fonts
|
|
|
|
For custom Bangla fonts, download from [Ekushey Fonts](https://www.omicronlab.com/bangla-fonts.html):
|
|
|
|
- Kalpurush
|
|
- SolaimanLipi
|
|
- Siyam Rupali
|
|
- Nikosh
|
|
- Akaash
|
|
|
|
## Troubleshooting
|
|
|
|
### Font Not Displaying
|
|
|
|
1. Check file format (must be .ttf, .otf, or .woff)
|
|
2. Verify file size < 5MB
|
|
3. Check browser console for errors
|
|
4. Ensure storage bucket has public read access
|
|
|
|
### Bangla Text Shows Boxes
|
|
|
|
The font doesn't support Bangla characters. Use:
|
|
- Noto Sans Bengali
|
|
- Noto Serif Bengali
|
|
- Or upload a Bangla-compatible custom font
|