AI Font Generator
Make a typeface out of photographs
Describe letters made of anything — cut paper, brass, petals, folded steel. Cut them out, seat them on a baseline, and export a typeface you can set on any website with one script tag. No font file. No @font-face. The letters stay photographs.
Type into it — each letter lands on its own, with a sound. Painted storybook letters, 61 glyphs with digits.
<script type="module" src="https://nanostudiopro.com/embed/type.js"></script>
<nano-type font="cms8bh2a700010xoceff8brw5" size="112" anim="drop">SUMMER</nano-type>No font file, no @font-face, no package to install. The letters are photographs, packed into one image and drawn by a 28 KB module. That font id keeps working after the font is edited and re-exported.
5 fonts above, all made in the editor and served from the same public address your own would be.
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 to a working typeface
Describe a style
Ask for letters made of anything — cut paper, brass gears, petals, folded steel. The model draws them in sheets, a row at a time.
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.
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 | The entrance, cascading letter by letter. Absent means still. |
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 | click | clack | chime | harp | … | A synthesised voice per letter — no audio files to host. |
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.
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. Seven entrances (pop, drop, shake, wiggle, jump, float, glitch), each cascading letter by 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