V-RICH Vue 3 Text Editor - Fonts Package

This package provides Bangla fonts and typography utilities for the V-RICH Vue 3 Text Editor.

Included Fonts

Bangla Fonts

1. SolaimanLipi - Popular Bangla font suitable for body text and headings

   • Weights: 400, 700
   • Class: rte-font-solaiman

2. Nikosh - Another popular Bangla font with good readability

   • Weights: 400, 700
   • Class: rte-font-nikosh

3. SiyamRupali - Unicode-compliant Bangla font

   • Weights: 400, 700
   • Class: rte-font-siyam

Default Fonts

1. Inter - Modern system font
2. Arial - Classic sans-serif
3. Georgia - Classic serif
4. SF Mono - Monospace for code

Usage

Import CSS

import '@v-rich/fonts'

Use with Vue Rich Text Editor

<template>
  <RichTextEditor
    v-model="content"
    :fonts="fontNames"
    @ready="onReady"
  />
</template>

<script setup>
import { ref } from 'vue'
import { RichTextEditor } from '@v-rich/vue-editor'
import '@v-rich/fonts'
import { getFontNames, getBanglaFonts } from '@v-rich/fonts'

const content = ref('<p>হ্যালো বিশ্ব!</p>')
const fontNames = getFontNames()

function onReady() {
  console.log('Editor ready with Bangla fonts')
}
</script>

Font Configuration

import {
  getBanglaFonts,
  getFontFamily,
  getFontClass
} from '@v-rich/fonts'

// Get all Bangla fonts
const banglaFonts = getBanglaFonts()

// Get font family by name
const fontFamily = getFontFamily('SolaimanLipi')
// Returns: "'SolaimanLipi', 'Noto Sans Bengali', 'Arial Unicode MS', sans-serif"

// Get CSS class by name
const fontClass = getFontClass('SiyamRupali')
// Returns: 'rte-font-siyam'

CSS Classes

Font Classes

• .rte-font-solaiman - SolaimanLipi font
• .rte-font-nikosh - Nikosh font
• .rte-font-siyam - SiyamRupali font
• .rte-font-inter - Inter font
• .rte-font-arial - Arial font
• .rte-font-georgia - Georgia font
• .rte-font-mono - Monospace font

Typography Classes

• .rte-bangla-heading - Optimized styling for Bangla headings
• .rte-bangla-body - Optimized styling for Bangla body text
• .rte-bangla-numerals - Use Bangla numerals
• .rte-text-direction-auto - Auto text direction
• .rte-text-direction-ltr - Left-to-right direction
• .rte-text-direction-rtl - Right-to-left direction

Language Support

The fonts automatically support Bangla language with these selectors:

.rte-content[lang="bn"],
.rte-content[lang="bd"] {
  font-family: 'SolaimanLipi', 'Noto Sans Bengali', 'Arial Unicode MS', sans-serif;
}

Font Loading

• Uses font-display: swap for better loading performance
• WOFF2 format for modern browsers with WOFF fallback
• Progressive loading with multiple font sources

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile browsers
• Graceful fallback to system fonts

File Size

• Total font files: ~200KB compressed
• Individual fonts: 40-80KB each
• CSS: 4KB

License

These fonts are included for demonstration purposes. Please check the license of each font before using in production projects.