Skip to main content

​
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

PageURL
Font Management/admin/settings/fonts

​
Using Fonts

​
Upload Custom Font

1

Open Font Management

Go to /admin/settings/fonts
2

Upload

  • Enter font name (e.g., “Kalpurush”)
  • Select .ttf file (max 5MB)
  • Click Upload Font
3

Use

Font appears in all font selectors with a purple “Custom” badge

​
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: 
import FontSelector from '../components/FontSelector/FontSelector';

<FontSelector
  value={selectedFont}
  onChange={setSelectedFont}
  label="Title Font"
  previewText="Preview Text"
/>

​
Props

PropTypeDescription
valuestringCurrent font value
onChangefunctionCallback when font changes
labelstringLabel text
previewTextstringText to show in preview

​
Where Fonts Are Used

SectionFont Options
HeaderName, Roles, Description
About MeVertical Name
BlogTitle, Content
ProjectsTitle, Content

​
Database Schema

​
custom_fonts Collection

{
  name: "Kalpurush",
  fileId: "abc123",
  fileUrl: "https://cloud.appwrite.io/v1/storage/..."
}
For custom Bangla fonts, download from Ekushey Fonts:
  • 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