Free font maker · no sign-up

Font & Icon Font Creator

Design your own font letter by letter, or turn a folder of SVG icons into an icon font. Draw with curves, shapes or pixels, trace over a reference letter, set spacing and metrics, try it live as you type, then download TTF, WOFF and WOFF2 with ready-to-use CSS.

Vector & pixel glyphsSVG icons → icon fontLive type previewTTF · WOFF · WOFF2CSS & demo pagePrivate, in your browser
How to make a font or an icon font
  1. Pick a character in the grid on the left. Letters with a dot already have a shape.
  2. Draw it between the guides: baseline, x-height, cap height, ascender and descender. Use Box and Ellipse for quick shapes, the Pen for curves, or Pixels for a pixel font. Turn on a reference letter in the Glyph tab to trace a system font.
  3. Holes: select a shape and press Hole to cut it out of the shapes behind it, like the inside of an O.
  4. Spacing: drag the right edge line (or type the width) so letters don’t touch. Watch the live preview under the editor.
  5. Icon fonts: add SVG icons in the Icons tab; each gets a code and a CSS class.
  6. Download TTF to install, or the web font kit for websites. Save the project to keep editing.

Using Font & Icon Font Creator

Create a real font file from your own letters or icons. Draw each character with boxes, ellipses, the pen or a pixel brush, trace a system font if you like, adjust widths and metrics, and test the font live as you type. SVG icons become an icon font with a CSS class for every icon.

  1. Pick a template in the Font tab: a pixel alphabet, an example icon font or an empty font.
  2. Choose a character in the grid and draw it between the guides. Turn on the reference letter to trace a system font, and mark inner shapes as holes.
  3. Drag the orange edge or press “Fit width to shapes” so letters are evenly spaced; check the preview line under the editor.
  4. For an icon font, add SVG icons in the Icons tab and rename them; each gets a Private Use Area code.
  5. Download TTF to install on your computer, or the web font kit with WOFF2, WOFF, CSS and a demo page.

Example

A 5×7 pixel font: switch on the Pixels brush, fill the cells of each letter and download a TTF to use in games or pixel art.
Twelve SVG icons dropped into the Icons tab become an icon font with classes like .my-icons-home and .my-icons-search.

Questions & answers

Is this font maker free?

Yes. It is free, needs no account and builds the font in your browser. Your drawings and icons are not uploaded.

Can I install the font on my computer?

Yes. Download the TTF and open it to install on Windows or macOS. It then appears in Word, Photoshop, Figma and other programs.

How do I make an icon font from SVG files?

Open the Icons tab and add your SVG files (or drop them on the editor). Each icon gets a code and a CSS class; download the web font kit for the fonts, CSS and a demo page.

Why is an icon empty or missing parts?

Fonts use filled shapes. Icons drawn only with strokes (outlines) must be converted to fills in your vector editor first, for example with “Stroke to path” or “Outline stroke”.

How do I make the inside of an O or A?

Draw the inner shape and press Hole. It is cut out of the shapes behind it in the final font.

Can I edit an existing font file?

This tool creates new fonts. To inspect or convert existing fonts, use the Font Explorer & Converter or the Web Font Converter.

Does it support kerning and ligatures?

Not yet. Each glyph has its own width; adjust widths and side spacing to balance the text.

KEEP YOUR WORKFLOW MOVING

A useful next step for your task.

Browse Images & Design

Help improve this tool

Report a problem or suggest an improvement

Describe the issue without pasting private tool input. Feedback goes to our admin inbox.

Find another tool · Read practical guides