Make Your Own

Vinara is open source and designed to be forked. Redesign the characters, add new ones, or adapt it for a different language.

What You Need

• Inkscape or Figma (free) — for designing vector glyphs
• FontForge (free) — for building the font file
• Basic understanding of bezier curves — for drawing clean outlines

Step 1 — Design Your Characters

Start with the Vinara SVG files as a base, or draw from scratch. Each character should fit within a consistent bounding box. Here are the key consistency rules:

• Stroke width: Keep all strokes the same weight for visual unity.
• X-height: Most characters should sit on the same baseline and reach the same height.
• Baseline: All characters align to the same bottom line.
• Spacing: Leave consistent side bearings so characters flow naturally when typed.

Figma workflow: Create one frame per character. Use the pen tool to draw outlines. Outline strokes before export (Outline Stroke → Flatten). Export each character as a clean SVG with no transforms.

Step 2 — Build the Font

Import your SVGs into FontForge:

1. Open FontForge and create a new font.
2. For each character, select a glyph slot and import the SVG.
3. Unicode mapping: Vinara uses the Latin letter slots (a-z, A-Z) so it works immediately in any text field. You can also use Private Use Area (PUA) codes like E000–E021 if you prefer.
4. Fix common issues:
   • Correct direction — ensure outlines are wound correctly
   • Remove overlap — merge overlapping paths
   • Add extrema — ensure curves have points at their extremes
   • Round to integer — snap coordinates to the grid
5. Set metrics ( ascent, descent, em-size ) consistently.
6. Export as TTF.

Step 3 — Build the App

Fork the Vinara app from GitHub and customize it:

1. Replace the font file in font/vinara.ttf with your own.
2. Update the keyboard map in js/mapping.js if you added or changed characters.
3. Update the transliteration rules in js/translit-engine.js if your romanization differs.
4. Deploy on Vercel (free) by connecting your GitHub repo.

Here is the basic font-face CSS you will need:

@font-face {
  font-family: 'YourFontName';
  src: url('font/your-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Licensing

Vinara is released under the SIL Open Font License 1.1. This means:

• You are free to use, study, modify, and redistribute the font.
• You cannot sell the font by itself.
• You cannot use the reserved font name "Vinara" for modified versions without permission.
• Modified versions must be released under the same license.

See the LICENSE file for the full text.