@sableclient/twemoji-font

Sable-maintained Twemoji COLR font package for web apps.

Install

pnpm add @sableclient/twemoji-font

Use the CSS entrypoint

import '@sableclient/twemoji-font';

Place Twemoji before your text fonts so emoji codepoints resolve to the COLR font:

font-family: Twemoji, var(--font-secondary), sans-serif;

The published @font-face includes a unicode-range covering common emoji blocks.

Use the raw asset in bundlers

import fontUrl from '@sableclient/twemoji-font/files/twemoji.woff2?url';

This raw asset import is intended for bundlers that support ?url asset imports, such as Vite.

Release flow

1. Add a change file with knope document-change, or let the upstream update workflow create one for Twemoji refresh PRs.
2. Merge the change into master.
3. .github/workflows/quality-checks.yml runs repo checks, tests, and package validation on pushes and pull requests.
4. CI opens a release PR from release with the version bump and changelog updates.
5. Merging that release PR tags the commit, creates the GitHub release, uploads a build/*.zip archive with ttf and woff2 font files, and publishes the package to npm with the repository secret NPM_TOKEN.

Maintainer setup

This repo keeps the upstream font-generation pipeline and packages the generated assets for npm distribution. Repo-owned build helpers live under scripts/. Use vp as the command front-end; repo commands are defined in package.json.

Canonical local setup:

1. pnpm install
2. py -3.11 -m pip install -e . (or python -m pip install -e . if that is the interpreter your build uses)
3. Install FontForge so fontforge is on PATH, or set FONTFORGE on Windows
4. Optional: install native ttfautohint or set TTFAUTOHINT if you do not want to use the Python wheel fallback

Use pnpm run for repo commands if vp is not on your PATH.

python -m pip install -e . installs fonttools[woff] and ttfautohint-py. The owned runner still requires native FontForge for raw TTF generation, then uses either ttfautohint on PATH or python -m ttfautohint for hinting.

Build the source font with:

vp run build:font

Run the fast static checks with:

vp run check

Run the linter only with:

vp run lint

Run the formatter only with:

vp run fmt

Run the test suite with:

vp run test

Run the full local verification path with:

vp run verify

Check for new upstream releases with:

vp run check:upstream

Refresh the pinned upstream source cache from the exact current gh-pages commit for a release version with:

vp run prepare:upstream -- 17.0.2

That command updates package.json twemoji metadata and warms .cache/twemoji/<commit>/svg.

Repin and update workflow actions with:

pinact run -u .github/workflows/check-upstream.yml .github/workflows/quality-checks.yml .github/workflows/prepare-release.yml .github/workflows/release.yml

Audit workflow security with:

zizmor .github/workflows/check-upstream.yml .github/workflows/quality-checks.yml .github/workflows/prepare-release.yml .github/workflows/release.yml