Sunny Marker

A handwritten variable font for little notes, labels, headings and playful interfaces. One self-hosted WOFF2 contains all four axes and 391 glyphs. Font version 1.313; package version 1.313.0. Free for personal and commercial use under the SIL OFL 1.1.

Install

npm install @sunnyai/sunny-marker

Also works with pnpm add @sunnyai/sunny-marker, yarn add @sunnyai/sunny-marker and bun add @sunnyai/sunny-marker. The same package is available as a versioned tarball from the Sunny website.

Any CSS bundler (Vite, React, Vue, Svelte, Astro)

Import once in your app's entry point or global stylesheet:

import "@sunnyai/sunny-marker/css";

<span class="sunny-marker note">A LITTLE NOTE GOES A LONG WAY.</span>

.note {
  font-size: 18px;
  font-weight: 500;
  font-stretch: 85%;
  font-style: oblique 0deg;
}

You can also apply font-family: "Sunny Marker", cursive directly. The stylesheet defines the font and one optional utility class; it does not change global type. Keep font-optical-sizing: auto and font-synthesis: none on your own classes.

Next.js

Use the optional next/font/local entry point instead of the CSS import:

import { SunnyMarker } from "@sunnyai/sunny-marker/next";
import "./globals.css";

export default function RootLayout({ children }) {
  return <html lang="en" className={SunnyMarker.variable}><body>{children}</body></html>;
}

.note {
  font-family: var(--font-sunny-marker), cursive;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-size: 18px;
  font-weight: 500;
  font-stretch: 85%;
  font-style: oblique 0deg;
}

SunnyMarker.className is also available. Next.js is an optional peer dependency; CSS users do not install it. Preloading is off because annotations usually do not need a page-wide font preload. The host app serves the font; no external font request or runtime library is required.

Variable controls

| Control | CSS | Range | | --- | --- | --- | | Weight | font-weight | 300–700 | | Width | font-stretch | 75%–125% | | Slant | font-style: oblique 6deg | 0–9° right lean | | Optical size | font-optical-sizing: auto | 10–36 |

For direct axis control, use font-variation-settings: "wght" 500, "wdth" 85, "slnt" -6, "opsz" 18. Positive CSS oblique angles correspond to negative slnt values. The font has slanted letterforms; it does not contain a separate cursive italic design. Case is controlled by your text or CSS text-transform.

The raw font is exported at @sunnyai/sunny-marker/files/SunnyMarker-Variable.woff2. The package contains no install scripts, telemetry, runtime dependencies, source history or Sunny brand artwork. Keep OFL.txt with redistributed font files.

Try the font and browse every glyph.