AI Font Generator
Make a typeface out of anything
Cut paper, brass, petals, folded steel — described, then set as real type on any website. No font file; the letters stay photographs.
21 alphabets
Behaviour
Put it on your site
Penumbra Sans, two lines, no font file:
<script type="module"
src="https://nanostudiopro.com/embed/type.js"></script>
<nano-type font="cmu5b7ps8005r0xtbuzo2fy9e">
YOUR WORDS
</nano-type>Glossy lilac letters strung with pearls, gold chain and cut gemstones, a charm hanging off nearly every one. Jewellery-counter type for beauty, bridal and fragrance work.
Eighties fantasy-cartoon letters forged from swords, axes, crowns and cracked stone, with purple lightning arcing off the edges. Heavy titling for retro toy branding and poster art.
Armoured letters in carbon fibre and gunmetal, lit from inside by magenta neon channels, with hazard triangles and panel numbers stencilled on the plating.
Letters built out of toy bricks, with pirate sails, motorbikes, snakes, rockets and minifigures posed inside the strokes. Toybox type for parties, play brands and stop-motion titles.
Letters laid out from classroom stationery — pencils, crayons, markers, scissors, rulers and paper clips, shot flat on the desk. Back-to-school type for education brands and worksheets.
Flat letters cut from overlapping planes of red, yellow, blue and green — hard edges, no shading, Bauhaus poster logic. Capitals, lowercase and figures for covers and exhibition posters.
Every letter is a habitat drawn in storybook colour: giraffes in the A, penguins on an ice shelf, a humpback inside the W. An illustrated alphabet for children's books and classroom posters.
Rounded letterforms grown over with moss and pale lichen, from deep forest green through olive to bone. Soft, tactile type for nature films, garden brands and slow-living packaging.
Letters arranged from real cut flowers — sunflowers, poppies, cornflowers, daisies and eucalyptus. Capitals, lowercase and numerals, for wedding stationery, spring campaigns and florists.
Every letter built out of real food: a watermelon W, an orange-slice O, kidney beans, almonds, radishes, blueberries and dried pasta. Photographic type for menus and grocery packaging.
Letters folded from patterned paper — polka dots, stripes, florals and plain kraft — photographed flat with every crease showing. Craft type for invitations and workshop posters.
Letters assembled from mecha armour — vents, thrusters, hydraulic cabling and panelled plating in factory white, grey and orange. Capitals, punctuation and symbols for sci-fi titling.
Hand-drawn scene letters in soft anime colour: brick chimneys, hearth fires, blue birds, bathhouse windows and wandering castles. Capitals and figures for animation titles and book covers.
Burnished copper letters full of gears, clock faces and glowing orange seams, with small forest spirits perched in the machinery. Steampunk type for fantasy titles and game interfaces.
Why it is not a font file
OTF and WOFF store outlines. An outline has no paint in it — converting a photographed letter to one throws away everything that made it worth generating. So the letters stay images, and the typesetting comes to them.
Letters keep their material
An outline format would flatten a painted letter into a silhouette. These stay photographs, so the paint, the grain and the light survive to the page.
Set like type, not placed like images
Real baselines, sidebearings, kerning, wrapping, alignment and line breaks. It behaves like text because it is measured like text.
Motion and sound belong to the page
The same face is still in one place and flying in somewhere else. Nothing about the entrance is baked into the font.
From a sentence or a photograph to a working typeface
Describe it, or bring a picture
Ask for letters made of anything — cut paper, brass gears, petals, folded steel — and the model draws them in sheets. Or skip that and import an image you already have.
Cut and seat them
Mark each letter on its sheet and it gets its own box, sidebearings and baseline. The background is keyed out, including any holes you fill by hand.
Export it
One press bakes every assigned letter into a single packed image at three resolutions, already keyed, with a gutter so no letter picks up its neighbour's colour.
Paste it anywhere
A script tag and an element. Your site, a client's theme, a landing page — the font is served from a stable public address that survives every re-export.
AI font generator from image
Or start from a picture you already have
Nothing has to be generated. Point it at a photograph of a shop sign, a scan of your own hand-lettering, a poster, a sheet you drew somewhere else — the scanner reads the letters off it and each one becomes a glyph with its own box, sidebearings and baseline. From there it is the same font as any other: key the background, seat them, export.
When the scanner cannot find them — a tight crop, a painted wall, letters running into each other — the same picture opens in the hand-cropping editor and you mark them yourself. An image it cannot read is the case that editor exists for, not a dead end.
What it takes
- Any image you can upload. Photograph, scan, screenshot, render. It goes into the same library everything else lives in.
- One picture is often enough. A sheet with a whole alphabet on it imports in one pass; a sign with six letters on it gives you six, and you add the rest from anywhere.
- Mixed sources are fine. Half the alphabet photographed and half described is still one typeface — the letters only have to agree with each other, not about where they came from.
- The letters stay photographs. Whatever the paint, the rust or the neon was doing in your picture is still doing it on the page.
Embed reference
Two lines on any website
Load the runtime once per page, then use the element wherever you want type. Every font id below is public — your visitors fetch the font straight from us, so there is nothing to host and nothing to keep in sync.
<script type="module" src="https://nanostudiopro.com/embed/type.js"></script>
<nano-type font="cms8bh2a700010xoceff8brw5" size="120" anim="drop">SUMMER SALE</nano-type>- Smaller build: swap
/embed/type.jsfor/embed/type.min.js— same runtime, about half the bytes. - Line breaks: use
<br>. A newline is only whitespace in HTML and the lines would join. - Centring: style the parent —
text-align: centeris inherited and the element follows it. Thealignattribute overrides page CSS rather than being the only way to ask. - Vertical space: the line box reserves a full em with leading, so a heading sits taller than its letters look. The element publishes its real ink box as CSS variables —
--nano-cap-top,--nano-cap-height,--nano-baseline,--nano-content-widthand--nano-content-height— so you can trim to the cap line withmargin-top: calc(var(--nano-cap-top) * -1)instead of guessing a line-height. - Events:
nano:readyandnano:errorboth bubble and are composed; the element also exposesreplay()andcaretRect().
| Attribute | Value | What it does |
|---|---|---|
font | font id | Which typeface. A bare id resolves to the stable address; a full URL is accepted too. |
size | px | Drawn size. Everything else that belongs to type is measured in ems of this. |
tracking | -0.5 – 2 | Letter-spacing, in ems. |
line-height | 0.5 – 4 | Multiplier on size. Use <br> for a hard break. |
align | left | center | right | Overrides the page. Left out, it follows the inherited text-align, so centring the section centres the type — and the whole block moves, not just the lines against each other. |
max-width | px | Where lines wrap. Absent means the element's width; 0 means never wrap. |
anim | pop | drop | shake | wiggle | jump | float | glitch | fly | The entrance, cascading letter by letter. Absent means still. |
direction | top | bottom | left | right | scatter | 0 – 359 | Where the letters come from, for anim="fly". Degrees are compass-style — 0 is from directly above, clockwise. `scatter` sends each letter in from its own side, the same side every time. The other movements were drawn pointing one way and ignore this. |
then | shake | wiggle | jump | float | glitch | What the letters keep doing once they have arrived — a second layer that composes with anim rather than replacing it. It starts as each letter lands, so it never fights the entrance. Only movements that end where they started can go here. |
then-intensity | 0 – 100 | How far that ongoing motion travels. Its own dial: how hard a letter lands and how much it fidgets afterwards are different questions. |
then-speed | 25 – 250 | Its own clock, for the same reason. |
trail | 0 – 8 | Ghosts — copies of each letter strung out behind it along its own path, fading as they go. A copy is the same animation as the letter started a moment later, so it follows whatever direction that letter took, including a scattered word where every letter came from somewhere different. Only movements that cross a distance (pop, drop, jump, fly) grow them. |
trail-fade | 0 – 100 | How fast a ghost dies. High is gone almost as soon as it appears. |
trail-spread | 0 – 200 | How far back the string of ghosts reaches, as a percentage of the natural spacing. |
anim-mode | once | loop | Play the entrance once, or keep it running. |
anim-speed | 25 – 250 | Percentage of the effect's natural speed. |
intensity | 0 – 100 | How far the motion travels. |
hover | jump | shake | wiggle | float | A reaction on rollover — the letters nudge where they stand and never leave. Only these four qualify: the entrances open at opacity 0, so one on hover would blink the word out and rebuild it. |
hover-intensity | 0 – 100 | How far the rollover travels. Defaults to 22 — an acknowledgement, not an entrance. |
replay-on | click | none | Whether clicking replays the entrance. Left out, it follows sound-on, which is the old behaviour and the reason a default headline restarts when clicked. |
surface | shimmer | holo | scan | glint | beam | ray | bloom | anamorphic | flare | An effect on the letters themselves. Comes from the font unless you override it. |
sound | tick | typewriter | bell | match | rockfall | whip | … | A voice per letter, fifty-seven of them: seventeen synthesised and forty recorded, all served from our domain. Nothing for you to host either way. |
sound-on | click | hover | enter | type | none | When it fires. `type` sounds one hit per letter as each one arrives. |
Questions
What does the AI font generator actually produce?+
A typeface made of images. You describe a style, the model draws sheets of letterforms, and you cut each one out and seat it on a baseline with its own metrics. Exporting bakes every letter into a single packed image with the background already removed — that packed image, plus its measurements, is the font.
Can I make a font from an image I already have?+
Yes, and nothing has to be generated first. Upload a photograph of a shop sign, a scan of your own hand-lettering, or a sheet you drew somewhere else, and the scanner reads the letters off it — each one becomes a glyph with its own box, sidebearings and baseline. When it cannot find them, the same picture opens in the hand-cropping editor and you mark the letters yourself. Photographed letters and described letters mix freely inside one typeface.
Is it a real font file I can install?+
No, and that is deliberate. These letters are photographs — painted, moulded, grown, welded — with colour, texture and light inside them. An OTF or WOFF stores outlines, which would throw all of that away the moment you converted. So the letters stay images and a small web component sets them like type: real baselines, kerning, line breaks, wrapping and alignment.
How do I use one of my fonts on my own website?+
One script tag and one element. Load the runtime once per page, then write <nano-type font="your-font-id" size="120">YOUR WORDS</nano-type>. There is no @font-face, no package to install, and no build step. The font id is stable — editing a letter and exporting again updates every site using it.
What happens to sites using my font when I edit it?+
They get the new version. The address is the font's id, not the file, so re-exporting swaps what that address serves. Nothing on the other end has to be changed or re-deployed.
Can the letters move?+
Yes — motion is asked for by the page, not baked into the font, so the same face can be still in body copy and fly in on a hero. Eight entrances (pop, drop, shake, wiggle, jump, float, glitch, fly), each cascading letter by letter, and fly takes a direction — a side, an angle, or scatter for a different side per letter. Plus surface effects that live on the glyphs themselves — shimmer, holo, scan, glint, beam, ray, bloom, anamorphic and flare.
Can visitors type in it?+
Yes. The element accepts typing and patches letters in place, so a newly arrived letter animates while the ones already on screen keep going. It can also play a per-letter sound as each one lands.
How big is the download?+
The runtime is about 28 KB as one module, or roughly half that minified, and it is loaded once per page however many headlines use it. The font itself is one packed image — a full alphabet of painted letters lands around 300 KB, which is a fraction of the source sheets it was cut from.
Your alphabet, in your material
Free trial credits, no card required. Describe a letter and see it come back ready to seat on a baseline.
Make your own font