SUNNY

A handwritten variable font by Sunny

SUNNY MARKER

SMALL NOTES. BIG PERSONALITY.

npm install @sunnyai/sunny-marker

Run in your project folder.

CSS + Next.js setup ↓

Make it your own.

Type your own words. Drag a slider. Find your kind of Sunny.

More options & CSS

Adjusts spacing and small details for the size you use.


                
              

            

          

        

        

          

            
A little Sunny, in the wild.

            
Small notes, useful labels, and room to play.

          

          

            

              

                Three small, slightly rotated handwritten notes: COULD WE TRY THIS OVER HERE, YES, THIS ONE, and A LITTLE MORE ROOM TO BREATHE.
              

              

                
In the margins

                
A few small notes, with room to breathe.

                

                  
                

              

            

            

              A yellow specimen reading FRESH PERSPECTIVE, SMALL BATCH, NO. 027, and GOOD IDEAS, IN SMALL SPACES in condensed Sunny Marker.
              

                
Small but mighty

                
Condensed lettering for labels and little spaces.

                

                  
                

              

            

            

              MAKE SOME ROOM in expanded white Sunny Marker on charcoal, with a yellow sparkle and the lowercase note for the good stuff.
              

                
Wide open

                
Expanded headlines with a softer lowercase note.

                

                  
                

              

            

          

        

        
        

          
ADD A LITTLE SUNNY.

          

            Run the install command inside your app’s folder, then import the stylesheet. A global
            npm install does not connect the font to your project.
          

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

          

            Using Next.js?
            
import { SunnyMarker } from "@sunnyai/sunny-marker/next";

            

              Use SunnyMarker.className on your note, or
              SunnyMarker.variable for a CSS variable.
            

          

          

            Setup and variable controls ↗ ·
            Variable desktop (.ttf) ↓
            ·
            Static desktop (.otf) ↓