1. Always Serve High-Efficiency WOFF2 Formats
TrueType (.ttf) files for Indic scripts typically weigh between 200 KB and 800 KB due to extensive GPOS and GSUB shaping lookups. Serving raw TTF over HTTP severely slows down page speed and hurts Core Web Vitals.
Using Brotli-compressed WOFF2 reduces the download payload by up to 70%, ensuring lightning-fast mobile loading.
- Include format('woff2') in your @font-face definition.
- Set Cache-Control: public, max-age=31536000, immutable for font files on your CDN.
2. Prevent Vertical Clipping with Generous Line-Height
Unlike English where letters sit snugly between baseline and cap-height, Kannada syllables can stack multiple consonants and vowel marks vertically (e.g. ಸ್ತ್ರ್ಯ).
A standard CSS line-height: 1.2 or 1.3 will clip the bottom of subscript marks (ottaksharas). For body copy, always specify line-height: 1.6 to 1.8 for Kannada text blocks.
3. Eliminate FOIT with font-display: swap
Never leave users staring at blank spaces while a custom font downloads. Setting font-display: swap instructs the browser to immediately show system fallback fonts (like Tunga, Nirmala UI, or sans-serif), seamlessly swapping in your custom web font once loaded.
4. Complete @font-face Production Snippet
Here is the recommended production CSS snippet for embedding Kannada fonts hosted on Lipi:
@font-face { font-family: 'Noto Sans Kannada'; src: url('https://lipi.rvanveshana.com/assets/fonts/kannada-fonts/noto-sans-kannada.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
- Specify appropriate font-weight and font-style to avoid faux bold or synthetic obliquing.
- Combine with CSS property font-feature-settings: 'kern' 1, 'liga' 1 for optimal OpenType shaping.