Typeface · 2026

SUNNY MARKER

A handwritten variable font for notes, labels and headlines. Free for anyone to use.

It started as the handwriting in Sunny. One file covers weight, width, slant and optical size, with Latin accents, arrows and a few small doodles.

Download1.4 MB

npm i @sunnyai/sunny-marker

Source

Version: 1.313
Axes: Weight, width, slant, optical size
Glyphs: 391, Latin with accents
License: SIL Open Font License 1.1

Try it

Weight400LightBoldWidth100%CondensedExpandedSlant0°UprightSlantedSize28 pxSmallBig

CSS for these settings

font-family: "Sunny Marker", cursive;
font-size: 28px;
font-weight: 400;
font-stretch: 100%;
font-style: normal;
font-optical-sizing: auto;
font-synthesis: none;
text-transform: uppercase;

Four axes

Weight 300–700

Fine tip to fat marker.

Ah300

Ah400

Ah500

Ah600

Ah700

Width 75–125%

Condensed for tight labels, expanded for headlines.

Ah75%

Ah87.5%

Ah100%

Ah112.5%

Ah125%

Slant 0–9°

A continuous lean on the same letterforms.

Ah0°

Ah2.25°

Ah4.5°

Ah6.75°

Ah9°

Optical size 10–36

Follows the text size on its own. Small text gets a taller lowercase and roomier spacing.

Ah10

Ah16

Ah22

Ah28

Ah36

391 glyphs

U+0041

Letters · 52

Figures · 10

Accents & extended · 205

Punctuation & symbols · 88

Use it

Install from npm, then import the stylesheet once in your app.

npm install @sunnyai/sunny-marker

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

In Next.js, use the next/font entry instead, then set font-family: var(--font-sunny-marker).

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

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

Or self-host the WOFF2 from the download.

@font-face {
  font-family: "Sunny Marker";
  src: url("SunnyMarker-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 9deg;
  font-display: swap;
}

.note {
  font-family: "Sunny Marker", cursive;
  font-weight: 500;
  font-stretch: 85%;
  font-style: oblique 4deg;
  font-optical-sizing: auto;
  font-synthesis: none;
}

Download

Variable fontTTF and WOFF2, 1.4 MB Static fonts30 OTF styles, 2.5 MB SourceUFO sources and build scripts on GitHub LicenseSIL Open Font License 1.1

Free for personal and commercial work under the SIL Open Font License 1.1. Use it in apps, sites, print and products, change it, and share it. The one thing you can’t do is sell the font on its own.