Skip to content

Tiniest possible pixel font for your JS games (<700b zipped, suitable for js13k)

License

Notifications You must be signed in to change notification settings

darkwebdev/tinyfont.js

Repository files navigation

tinyfont.js

Tiniest possible pixel font for your JS games (<700b zipped, suitable for js13k): Demo

Inspired by https://github.com/PaulBGD/PixelFont

install

yarn add tinyfont

import...

if you use ES-modules in the browser:

import { initFont } from 'node_modules/tinyfont/src/index.js';
// Load the desired font
import { font } from 'node_modules/tinyfont/src/fonts/pixel.js';

if you use Common JS or ES modules with a bundler like webpack or rollup:

import { initFont, font } from 'tinyfont';

render:

// Get the canvas context
const ctx = document.querySelector('canvas').getContext('2d');

// Init the tinyfont and get the `render` function
const render = initFont(font, ctx);

// Show the string on the screen
render('Simple example');
render('Complex stuff', 100, 100, 50, 'red');

render function signature:

render(string, x, y, size, color)

  • x: horizontal coordinate, px (default: 0)
  • y: vertical coordinate, px (default: 0)
  • size: font height, px (default: 24)
  • color: font color, string (default: '#000')

use different fonts:

Builtin fonts:

import from a browser:

import { font } from 'node_modules/tinyfont/src/fonts/tiny.js';

import using a bundler:

import { initFont, font } from 'tinyfont/font-tiny';

examples

Simple example (source)

Multi fonts example (source)

About

Tiniest possible pixel font for your JS games (<700b zipped, suitable for js13k)

Resources

License

Stars

Watchers

Forks

Packages

No packages published