✨ Callijatra Foundation Open Source Project

Nepal Lipi & Ranjana Lipi
Web Font Switcher Widget

A lightweight, standalone JavaScript widget enabling instant live switching between Original Devanagari, Nithya Ranjana, Nepal Lipi Aakha, and Noto Sans Newa Unicode fonts on any website.

Try Live Article Demo Interactive Playground GitHub Repo
Live Widget Demo (Select font in header or dropdown) Devanagari

अःपुगु ‘नित्या रञ्जना’ लिपिया युनिकोड फन्ट सार्वजनिक

विश्वया हे सुन्दर लिपि कथं नांजाःगु रञ्जना लिपिया न्हूगु युनिकोड फन्ट सार्वजनिक जूगु दु । क्यालिजात्रा फाउन्डेसनपाखें तयार याःगु थ्व ‘नित्या रञ्जना’ नांगु थ्व न्हूगु फन्ट येँ महानगरपालिकाया उपमेयर सुनिता डंगोलं सार्वजनिक यानादीगु खः ।

Interactive Sandbox

Multi-Script Comparison Matrix

Type custom Devanagari or Nepalbhasa text below to see real-time side-by-side rendering across all four supported font modes.

1. Original Devanagari Default
2. Nithya Ranjana Ranjana Lipi
3. Nepal Lipi "Aakha" Devanagari-mapped
4. Noto Sans Newa Unicode Convert
Why Use Font Switcher?

Designed for Indigenous Script Preservation

Empower your readers to view traditional Nepal Lipi and Ranjana scripts without breaking standard web accessibility or search indexing.

4 Supported Font Modes

Seamlessly switch between Original Devanagari, Nithya Ranjana webfont, Nepal Lipi Aakha, and official Google Noto Sans Newa Unicode.

Instant Unicode Conversion

Automatically converts standard Devanagari text into official Unicode 9.0 Newa script block characters when selecting Noto Sans Newa.

Dark Mode & Contrast Ready

Automatically detects dark background colors and applies contrast adjustment so dropdown text remains readable everywhere.

Zero External Dependencies

Written in vanilla JavaScript and CSS. Lightweight (~5KB), zero frameworks required, works on all modern mobile and desktop browsers.

Persistent Preference

Remembers the user's selected font preference using localStorage so their choice persists seamlessly across page navigations.

Flexible Placement

Place the widget anywhere: inside a navigation bar, header element, sidebar container, or let it float freely in the top-right corner.

Integration Helper

Interactive Code Snippet Generator

Customize your widget configuration options and copy the ready-to-use HTML/JS integration code.

Light Mode Container Border:
Dark Mode Container Border:
Light Mode Select Border:
Dark Mode Select Border: 

        
      

    

  


  
  

    

      
Developer Guide

      
Quick Start & Configuration Reference

      
Complete overview of parameters for FontSwitcher.init() options.

    


    

      

        
          

            Option
            Type
            Default
            Description
          

        
        
          

            targetClasses
            Array
            null
            Array of class names (e.g. ['newa-content', 'article']) to apply font switching to. Takes precedence over targetSelector.
          

          

            targetSelector
            String
            'body'
            CSS selector string for elements to apply font switching when targetClasses is not set.
          

          

            container
            String | HTMLElement
            null
            CSS selector or DOM element where widget is inserted. If null, floats fixed on screen.
          

          

            position
            String
            'top-right'
            Floating position when container is not set. Options: 'top-right' or 'bottom-right'.
          

          

            labelText
            String | Boolean
            'Font:'
            Text label shown before dropdown. Set to '' or false to hide label and show dropdown only.
          

          

            dropDirection
            String
            'auto'
            Dropdown open direction ('auto', 'up', or 'down'). Automatically set to 'up' when position: 'bottom-right'.
          

          

            showContainerBorder
            Boolean
            true
            Set to false to remove the outer container border.
          

          

            containerBorderColor
            String
            null
            Custom container border color for light mode.
          

          

            darkContainerBorderColor
            String
            null
            Custom container border color for dark mode (when .dark is active).
          

          

            showSelectBorder
            Boolean
            true
            Set to false to remove the select field border.
          

          

            selectBorderColor
            String
            null
            Custom select field border color for light mode.
          

          

            darkSelectBorderColor
            String
            null
            Custom select field border color for dark mode (when .dark is active).
          

          

            showBorder
            Boolean
            true
            Legacy option: controls both container and select borders simultaneously if specific border options are omitted.
          

          

            borderColor
            String
            null
            Legacy option: custom border color for both container and select field in light mode.
          

          

            darkBorderColor
            String
            null
            Legacy option: custom border color for both container and select field in dark mode.
          

          

            backgroundColor
            String
            null
            Custom background color hex/rgb for light mode. Auto-adjusts text color for dark backgrounds.
          

          

            darkBackgroundColor
            String
            null
            Custom background color hex/rgb when dark mode (.dark) is active on page.
          

          

            autoLoad
            Boolean
            true
            Automatically loads Google Fonts stylesheet for Noto Sans Newa when selected.
          

          

            storageKey
            String
            'font-switcher-selection'
            localStorage key for saving user preference.