# (Variable) Font Previewer

A simple, browser-based tool for previewing and testing Variable Fonts (and standard fonts) locally.

## Live demo

[https://toktaro.github.io/Variable-Font-Previewer/](https://toktaro.github.io/Variable-Font-Previewer/)


## Features

- **Real-time Preview**: Adjust variable font axes (Weight, Width, Slant, etc.) and see changes instantly.
- **Drag & Drop**: Easily load font files (`.ttf`, `.otf`, `.woff`) by dropping them onto the window.
- **OpenType Features**: Toggle common OpenType features (ligatures, kerning, etc.) on and off.
- **Writing Modes**: Support for both Horizontal and Vertical text layout.
- **Typography Controls**: Adjust tracking (letter-spacing), line-height, and font size.
- **Sample Text**: Switch between English, Japanese, and Number sample texts, or type your own.
- **CSS Export**: Automatically generates the CSS `font-variation-settings` string for your current configuration.
- **Dark/Light Mode**: Toggle between dark and light themes.

## Usage

1. Clone or download this repository.
2. Open `index.html` in your web browser.
3. Drag and drop a font file into the window to load it.
4. Use the sidebar controls to adjust settings and preview the font.

## Dependencies / Credits

- **[opentype.js](https://opentype.js.org/)**: Used for parsing font files and extracting variable axes/OpenType features. (MIT License)
- **[Google Fonts](https://fonts.google.com/)**: Uses 'Inter' font for the UI.

## License

This project is licensed under the [GNU General Public License v3.0](LICENSE).
(c) 2025- toktaro