# Fonts Directory

This directory contains the same fonts used in the Android Trip App, ensuring visual consistency between platforms.

## Font Files

### Archivo Font Family (English/Latin)
- **`archivo-regular.ttf`** - Archivo Regular (400 weight)
- **`archivo-bold.ttf`** - Archivo Bold (700 weight)

### Malayalam Font Family
- **`jaro.ttf`** - Jaro Malayalam font
- **`kanit.ttf`** - Kanit Malayalam font

### Source
These fonts are copied from the Android app:
- Original location: `app/src/main/res/font/`
- `archivo.ttf` → `archivo-regular.ttf`
- `archivo2.ttf` → `archivo-bold.ttf`
- `jaro.ttf` → `jaro.ttf`
- `kanit2.ttf` → `kanit.ttf`

## Usage

The fonts are loaded via CSS `@font-face` declarations in `css/style.css`:

```css
@font-face {
    font-family: 'Archivo';
    src: url('../assets/fonts/archivo-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('../assets/fonts/archivo-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jaro';
    src: url('../assets/fonts/jaro.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url('../assets/fonts/kanit.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
```

## Applied Elements

The fonts are applied to all text elements with proper language support:

### English/Latin Text
- **Clock time/date** - Archivo Bold (700)
- **Route names** - Archivo Regular (400)
- **Stop names** - Archivo Regular (400)
- **Next stop display** - Archivo Regular (400)
- **All UI text** - Archivo Regular (400)

### Malayalam Text
- **Malayalam stop names** - Jaro/Kanit fonts (automatic detection)
- **Malayalam route names** - Jaro/Kanit fonts (automatic detection)
- **Mixed text** (e.g., "Areekode അരീക്കോട് (Viking)") - Jaro/Kanit for Malayalam parts

## Fallback Strategy

The font stack includes multiple fallbacks for both English and Malayalam text:

```css
font-family: 'Archivo', 'Jaro', 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
```

### Font Priority:
1. **Archivo** - Primary English font
2. **Jaro** - Primary Malayalam font
3. **Kanit** - Secondary Malayalam font
4. **System fonts** - Fallback for both languages

## Benefits

1. **Visual Consistency** - Identical to Android app appearance
2. **No External Dependencies** - Fonts are bundled with the app
3. **Fast Loading** - Local fonts load immediately
4. **WebOS Compatible** - TTF format works on all WebOS devices
5. **TV Optimized** - Font designed for TV viewing distance

## File Sizes

- `archivo-regular.ttf`: ~734KB
- `archivo-bold.ttf`: ~652KB
- `jaro.ttf`: ~145KB
- `kanit.ttf`: ~173KB
- **Total**: ~1.7MB (acceptable for TV app)

## Notes

- Fonts are loaded with `font-display: swap` for better performance
- Font rendering is optimized with antialiasing
- All text elements maintain the same visual hierarchy as Android
- **Malayalam text** (അരീക്കോട്) will render perfectly with Jaro/Kanit fonts
- **Mixed text** like "Areekode അരീക്കോട് (Viking)" displays correctly
- **Automatic font selection** based on text content (Malayalam vs English)
