Back to Plugins

Font-o-matic
Generate fonts directly from Figma
custom fontwoffttfmake fontgenerate fontsfigma-to-codefont generatorcreate fontglyphotffontexport fontfont maker
Plugin Preview
About this plugin
Creating a custom font couldn't be any simpler:
- Arrange your characters horizontally in this specific order: capital letters A-Z, lowercase a-z, digits 0-9, and punctuation characters !@#$%^&*()_+-={}[]|\:;"'<>,.?/`~ (there should be a total of 94)
- Launch Font-o-matic and select all 94 characters
- Specify a name for the font family, select the font weight, and optionally adjust the sidebearings
- Press "Forge Font"
- Click the "Download" link in the confirmation dialog
Support for additional languages and glyphs:
As of v3, Font-o-matic supports the addition of any Unicode characters you want to include in your font:
- Align any additional glyph shapes after the required 94. The order of the additional shapes does not matter.
- Label each shape layer (for the additional glyphs) with either a) the Unicode name in the format 'U+xxxx' or b) the single Unicode character it represents.
- Select all of your shapes, and the button should indicate how many of the required shapes plus how many extra shapes are selected.
Some helpful tips:
- 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.
- Properly scale all of your characters beforehand, and make sure they are proportionally sized relative to each other.
- 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.
- The larger your characters are, the less the calculations need to scale up your letters, and therefor 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.
- Some text editing programs automatically replace quotation pairs with directional quotation marks. If you wish to support these unique Unicode glyphs, make sure to add them as additional characters with labeled layers (U+2018, U+2019, U+201C & U+201D). Alternatively, if you do not include these glyphs Font-o-matic will duplicate your single and double quotes into these glyphs as a fallback so that they will not get substituted for a system default font.
Plugin Details
Version | 3 |
---|---|
Created | July 12, 2024 |
Last Updated | July 29, 2024 |
Category | Import & export plugins |
Creator | Jeremy Clark |
Stats | 247 installs, 70 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML