Back to Plugins
Font-o-matic

Font-o-matic

Generate fonts directly from Figma

custom fontwoffttfmake fontgenerate fontsfigma-to-codefont generatorcreate fontglyphotffontexport fontfont maker

Plugin Preview

Font-o-matic preview

About this plugin

Creating a custom font couldn't be any simpler:

  1. Arrange your characters in this specific order: capital letters A-Z, lowercase a-z, digits 0-9, and punctuation characters !@#$%^&*()_+-={}[]|\:;"'<>,.?/`~ (there should be a total of 94 at minimum for a Latin base font)
  2. Launch Font-o-matic and select all 94 characters (or select a single parent frame/component containing them)
  3. Specify a name for the font family, select the font weight, and optionally adjust the sidebearings
  4. Press "Generate Font"
  5. Click the "Download" link in the confirmation dialog


Ordering flexibility (new in v4): Characters can be arranged horizontally (left-to-right), vertically (top-to-bottom using layer order), or in a grid—the plugin automatically detects the layout and sorts glyphs correctly.


Support for additional languages and glyphs:

Font-o-matic supports the addition of any Unicode characters you want to include in your font::

  1. Arrange any additional glyph shapes after the required 94. The order of the additional shapes does not matter—they can be mixed with the base glyphs or placed separately.
  2. Label each shape layer (for the additional glyphs) with either 1) the Unicode name in the format 'U+XXXX' (e.g., "U+0416" for Cyrillic Ж) or 2) the single Unicode character it represents (e.g., "Ж")
  3. Select all of your shapes (or a parent frame/component containing them), and the button will indicate how many required shapes plus how many extra shapes are selected.


Some helpful tips (new in v4):

  1. Leading/trailing spaces in Unicode labels are automatically trimmed for convenience.
  2. If additional glyphs have invalid Unicode labels (like default "Vector" names), they'll be skipped with a clear warning message so you can fix them.


Per-glyph sidebearing control (new in v4):

Fine-tune spacing for individual glyphs using either method:


Option A: Naming convention

  1. Add `[L=##,R=##]` to any layer name (e.g., "W [L=40, R=55]")
  2. These values are in font units (typically 40-70 range)


Option B: Frame padding

  1. Place your glyph in a frame with auto-layout enabled
  2. Set left and right padding values
  3. The plugin automatically detects and uses these as sidebearings


Enhanced shape support (new in v4):

  1. No need to flatten: Create glyphs using groups, components, boolean operations, or nested frames. The plugin temporarily flattens them during processing without modifying your originals—your design stays editable.
  2. Reusable parts: Keep your design elements as components for easy editing—they'll be processed correctly during font generation.
  3. Frame selection: Select a single parent frame or component containing all your glyphs instead of individually selecting each shape—the plugin automatically finds and processes all nested glyphs.


Helpful tips

  1. Make sure the 94 required characters are in the correct order, or they will mismatch the unicode characters they're assigned to in the font. The plugin automatically detects layout (horizontal, vertical, or grid) and sorts glyphs correctly.
  2. Properly scale all of your characters beforehand, and make sure they are proportionally sized relative to each other.
  3. The spacing between your characters does not matter, but the relative vertical alignment of your characters does and is taken into account when the plugin calculates the baseline, x-height, cap height, ascender and descender measurements. For example, your commas and periods should be close to the baseline of your letters. If your glyphs span multiple rows, the plugin automatically normalizes them to a common baseline.
  4. The larger your characters are, the less the calculations need to scale up your letters, and therefore the more precise your alignment will be. The emsquare that the plugin uses is 1000 units, so at 1000 pixels it would be 1:1, though even at 1:20 (50x50px) you should be more than fine.
  5. Some text editing programs automatically replace quotation pairs with directional quotation marks (U+2018, U+2019, U+201C & U+201D). Font-o-matic automatically adds these as fallbacks by duplicating your standard quote characters, so you don't need to create them manually. If you explicitly include these glyphs with Unicode labels, they'll be used instead of the auto-generated ones.

Plugin Details

Version4
CreatedJuly 12, 2024
Last UpdatedOctober 31, 2025
CategoryImport & export plugins
CreatorJeremy Clark
Stats273 installs, 77 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none