ITpris Verktyg

Font Creator guide

Getting started with Font Creator

Font Creator is a font editor in your browser. Your font is kept on this device; nothing is uploaded.

Open Font Creator

The page

On the left is the glyph grid: one box per character, dashed until it is drawn. In the middle are three views: Draw (the glyph editor), Kerning and Type test. The panel on the right has the glyph's width and side bearings, the characters, the handwriting sheet, the export, the font's names and licence, and its metrics.

On a phone the grid is the page: tap a letter to draw it and ‹ Glyphs to go back. The panel is a sheet at the bottom; tap Settings to open it.

Draw a letter

  1. Pick a letter in the grid.
  2. Choose the Pen (P): click for a sharp point, drag for a curve, click the first point to close the shape.
  3. Or draw with Rectangle (R), Ellipse (E) or Stroke (S); a shape drawn inside another one becomes a hole.
  4. Use Select (V) to move points and handles; arrow keys nudge, Delete removes, a double click turns a point smooth or sharp.
  5. Select two contours with Shift and use Path ▾ Union or Subtract; Remove overlap merges the whole letter.

Tip: Points snap to the grid and to the baseline, x-height, cap height, ascender and descender. Hold Alt to place a point freely.

Bring in what you have

  1. Draw from SVG…: paste an SVG or its path data, or choose an .svg file, and fit it to the cap height or the x-height.
  2. Trace a picture…: a photo of a letter becomes its outline; set the ink threshold.
  3. Print a sheet… and Read a filled sheet… under Handwriting turn a page of handwriting into a whole font.
  4. Open… opens a TTF, OTF, WOFF or WOFF2 to edit.

Space and kern

  1. Set Width, Left side and Right side in the panel for each letter.
  2. In the Kerning view, type two letters, move the slider, and watch the sample line.
  3. Check the Type test view with your own text, at several sizes, on light or dark.

Export and keep it

  1. Under Font, set the family name, the designer and the licence (Use the SIL Open Font License 1.1 fills it in).
  2. Under Export, choose TTF, OTF, WOFF2 or WOFF and click Download font, or Save to Files….
  3. Copy CSS @font-face gives the rule for a website. Save project keeps an .sfont file to edit again.