When off, image is centered at its original size. When on, it fills the canvas proportionally.
Texture and all defined regions will be cleared. Are you sure you want to continue?
Current font settings and regions will be overwritten. Continue?
A bitmap file was loaded. Update Bitmap filename in the project to ?
Font imported. The following notes may require your attention:
The following issues were detected. The exported .fnt file may be incorrectly interpreted:
Please review your font settings before exporting.
Bitmap filename is empty. The exported .fnt file will have no bitmap reference. Continue anyway?
FNTbyMemeorites — Help
FNTbyMemeorites is a free browser-based tool for creating bitmap font definitions from an existing texture atlas. The output is a .fnt file in AngelCode’s bitmap font format (see BMFont and its file format specification), which is supported by a wide range of engines and tools. The app was primarily made and tested with Godot Engine in mind, but it is not limited to it.
All your data — the font texture, the project file, and the exported .fnt file — stay entirely yours. Nothing is uploaded anywhere.
FNTbyMemeorites is developed and maintained by Lojza Filip. If you have any question, bug report, or feature request, feel free to write me an email at lojza.filip@gmail.com. The app is free to use. The outputs (font files, projects) are yours to keep and use however you like — for personal or commercial projects. If you create and publish a modified version of the app, please credit the original. Do not sell access to the app itself or any modified version of it.
If you enjoy FNTbyMemeorites, consider buying me a coffee:
The left sidebar has two tabs: Project and Settings. Project holds font metadata and project management buttons. Most settings are saved automatically in the browser, so they persist between sessions without any manual action.
The name of your font. It is written into the face tag of the exported .fnt file and used to
suggest a filename when saving the project. It has no effect on how glyphs are rendered.
The filename of the texture atlas as it will be referenced in the exported .fnt file. Your target environment (e.g. Godot Engine) uses this to locate the image that belongs to the font definition. Make sure the name here matches the actual filename you intend to use.
When you load a bitmap and this field is empty, it is filled in automatically. If the field already contains a name and you load a different file, the app will ask whether you want to update it — so you stay in control.
An informative field only. It does not affect the font definition or the preview in any way. It is stored in the .fnt file and may be read by the target environment, but the actual displayed size is typically set there. You can leave it at 0 if you don’t need it.
Imagine a ruled notebook: the baseline is the horizontal line that the letters sit on. Capital letters and most lowercase letters rest on it; descenders like y, g, or p dip below it.
In FNTbyMemeorites, baseline is measured in pixels from the top of the glyph region downward. So if your character is 12 px tall and the letter body occupies the top 10 px (with 2 px for descenders), the baseline value would be 10.
The target engine uses the baseline to vertically align text from different fonts or sizes, ensuring all characters sit on the same imaginary line regardless of their individual heights.
The vertical distance between the tops of two consecutive lines of text, in pixels. Think of it as the height of one “row” of text. If your characters are 12 px tall and you want a small gap between lines, you might set line height to 15 or 16.
This value also drives the multiline preview in the preview canvas. One thing to watch: if a descending character like y or q on one line meets a tall character like Á or Č on the next, a line height that is too small will cause them to overlap.
After drawing a character, the renderer moves the cursor right before drawing the next one. The distance it moves is called the x-Advance. By default, x-Advance equals the character width plus this value.
So Minimum x-Advance adds a fixed amount of space after every character. A value of 1 gives a minimal 1-pixel gap. A value of 3 or 4 gives a noticeably airier feel. Setting it to 0 places characters edge to edge — useful for certain tight pixel fonts. You can override x-Advance per character in the Glyphs inspector.
The Settings tab lets you adjust the visual appearance of the canvas and a few behavioural options. All settings are saved automatically in the browser.
FNTbyMemeorites supports two independent color schemes: one for a dark canvas background and one for a light one. Switch between them using the palette icon button at the top of the Settings tab.
Each scheme independently stores: the region outline color, the selected region color, the canvas background color, and the outline thickness for regular and selected regions (1–5 px). This is useful when your font texture has a light background — switch to the dark scheme so region outlines stay clearly visible, or vice versa.
When enabled, deleting a region shows a confirmation dialog. When disabled, deletion happens immediately. Handy to turn off once you are comfortable with the workflow.
When enabled, visual reference lines are drawn over the glyph canvas next to each defined region. See the Typography guides section below for details.
The Settings tab lets you load a static background image to display behind the font texture on the glyph canvas, the preview canvas, or both. This is useful as a visual reference — for example, a screenshot from your game — so you can see how the font looks in its actual context while you adjust regions, offsets, and kerning.
The image sits fixed behind the content. It does not pan or zoom with the font texture — it stays anchored to the canvas at all times. Two display modes are available: centered at original size, where the image is placed in the middle of the canvas without any scaling, and adjust to canvas, where the image is scaled to fill the canvas proportionally (the edges may be cropped).
Once an image is loaded, you can temporarily hide it using the Hide button without clearing it, and show it again with Show. The Clear button removes the image entirely and returns the section to its initial state.
The background image itself is not persisted between sessions — the browser has no access to your local files without your explicit action, so you will need to load it again each time you open the app. However, the two settings — which canvas to display it on and whether to adjust it to the canvas — are saved automatically and will be restored on next launch.
The glyph canvas is the main workspace on the left side of the screen. Load your texture here and define rectangular regions around each character. The glyph canvas and the preview canvas on the right share the screen, separated by a draggable vertical divider. Drag it all the way to an edge to hide one side; use the small arrow buttons on the divider to restore it. Double-click the divider for a 50/50 split.
Click the load bitmap button in the toolbar (image icon), or click anywhere on the empty canvas. You can also drag and drop a PNG file onto the canvas.
Click and drag on the canvas to draw a rectangle around a glyph. When you release, a small input field appears — type the character this glyph represents (a single keypress is enough) and press Enter to confirm, or Escape to cancel.
Click any existing region to select it (it turns green by default — or any other color, if you have modified the appearance settings — and its inspector card scrolls into view). Drag the center to move it, or drag any of its eight edge/corner handles to resize it. Press Delete or Backspace to remove the selected region.
The flood select tool (the arrow with a plus sign in the glyph canvas toolbar) is an alternative region-definition method, particularly useful for pixel fonts where each character consists of clearly separated pixel clusters.
With the tool active, clicking any pixel belonging to a glyph automatically detects all connected pixels (flood fill) and computes the tightest bounding box around them. You can click multiple disconnected parts one after another — their bounding boxes accumulate into one merged region. This is useful for characters like i or ! that consist of two separate parts.
Right-click (or press Enter) to confirm and assign a character. Press Escape to cancel. The tool stays active for the next region. You can pan with Space + drag even while the tool is active.
| Undo — reverts the last action. Supported actions include creating, moving, resizing, and deleting regions; changing per-glyph attributes; and all kerning edits. Keyboard shortcut: Cmd/Ctrl+Z. | |
| Redo — re-applies an action that was undone. Keyboard shortcut: Cmd/Ctrl+Shift+Z. Both buttons show the action name in their tooltip and are disabled when the respective stack is empty. | |
| Load bitmap — opens a file picker for the font texture. Equivalent to clicking the empty canvas. | |
| Zoom in — zooms into the canvas center. Mouse wheel equivalent. | |
| Zoom out | |
| Zoom reset — fits the texture to the canvas. Equivalent to double-clicking the canvas. | |
| Flood select tool — toggles flood select mode. The button turns green when active. |
When enabled in Settings, a set of colored reference lines is drawn on the glyph canvas for each defined region. They give you immediate visual feedback on whether baseline, line height, and offsets are set correctly relative to each glyph.
Tip: If possible, use a font texture that already has its characters vertically aligned (or laid out in a grid). In that case, you can define tight regions around each character on the canvas, and then individually adjust their y-Offset to make the top of the text line, baseline, and bottom of the line visually consistent across all glyphs.
The right panel shows all defined regions as scrollable cards. Clicking a region on the canvas highlights its card and scrolls it into view. Clicking a card selects the corresponding region on the canvas.
Each card shows the assigned character in bold and its Unicode code point (e.g.
U+0041 for “A”) in small grey text. If a region has no character assigned, a yellow
warning triangle appears instead of the character. A yellow triangle also appears when the same character is
assigned to more than one region, since duplicate characters will collide in the exported font.
The list can be sorted alphabetically by character using the sort button in the top-right corner of the inspector.
When a card is selected, three extra fields appear:
Each field has a small undo arrow on its right, visible only when the value has been customized. Click it to reset to default. The glyph preview strip at the top of the inspector shows the selected character on both black and white backgrounds.
Kerning is the fine-tuning of spacing between specific pairs of characters. Without kerning, every character is spaced purely by its x-Advance. With kerning, you can tighten or loosen the gap for particular combinations — for example, bringing AV closer together because their diagonal shapes naturally leave too much white space between them.
FNTbyMemeorites has two views: Standard pairs and Bilateral kerning. Switch between them with the arrow buttons at the top of the Kerning inspector. The cleanup button () removes empty or zero-amount entries.
The traditional kerning view. Each card is a kerning group: a primary (first) character paired with a set of secondary (following) characters, all sharing the same kerning amount.
Example: primary A, secondary V W T Y, amount −2 means “when A is followed by any of V, W, T, or Y, reduce the gap by 2 pixels.”
Add a kerning group for any defined character using the buttons at the bottom of the list. Each entry has four action buttons:
| Preview — appends all pairs from this entry to the textarea for instant visual feedback. | |
| Fill — auto-populates secondary characters from a category (lowercase, capitals, symbols, or all defined). A quick way to apply one amount to a whole character class. | |
| Duplicate entry — adds a new entry for the same primary character, for a different amount or different secondary characters. | |
| Delete — removes this entry. If it was the last entry for that primary character, the whole group is removed. |
Filter / quickedit: The filter input at the top of the Standard pairs view filters the list by primary character. If you type exactly two characters, the view switches to a quickedit card for that specific pair — click it to edit the amount directly. This is the fastest way to tweak one pair.
If a character appears in multiple entries for the same primary, a yellow warning triangle appears. Click it to keep the definition only in that entry and resolve the duplicate.
Bilateral kerning is a character-centric view. Instead of “which characters follow A?” you think “what are all the kerning relationships of A — both to its left and to its right?”
Select a character from the dropdown. Three sections appear:
The main advantage of bilateral kerning is the Copy kerning to… function at the bottom. If A, Á, and  all need the same kerning, define it once for A and copy it to the others in one click. All existing kerning for the target is replaced — you will be asked to confirm.
Bilateral kerning and Standard pairs are two views of the same underlying data. Any change in one is immediately reflected in the other.
The preview canvas renders your font in real time using the text in the textarea below it. It reflects all current region definitions, kerning pairs, per-glyph offsets, line height, and Minimum x-Advance. Characters not yet defined appear as crossed-out rectangles, so you can see where they would be placed.
The view stays where you left it when you zoom or pan manually. Double-click to re-fit at any time.
Each kerning card in the Kerning inspector has a preview button (). Clicking it appends a line of character pairs to the textarea, separated by spaces, so you can immediately see how the kerning looks on the canvas.
You can also populate the preview from the preview canvas toolbar using the Add to preview button (). Its dropdown offers three options: Defined glyphs appends all characters that have a region assigned, in the current sort order; Defined kerning pairs appends every pair that has an explicit kerning rule; All possible kerning pairs appends the full alphabet × alphabet grid, useful for a comprehensive spacing review.
The textarea below the preview canvas can be edited freely at any time — type, paste, or delete text to set up whatever test content you need. You can resize the textarea area by dragging the horizontal splitter above it. The content is saved in the browser and persists between sessions, so your test text is still there the next time you open the app.
When Baseline is set and at least one kerning pair exists, the preview canvas draws a small orange arc beneath each kerned pair, directly below the baseline. This makes it easy to spot which character combinations are affected by kerning rules at a glance. The arcs can be toggled on or off with the kerning arcs button in the preview toolbar.
Click Export font (.fnt) to generate the bitmap font descriptor file. The exported file contains:
The .fnt file does not contain the texture image itself — it only references it by filename. Make sure the texture file is placed where your target environment expects it, using exactly the filename set in Bitmap filename.
Before the export proceeds, FNTbyMemeorites checks for issues that could cause the resulting .fnt file to be misinterpreted. If any are found, a warning dialog is shown listing the problems. You can choose to fix them first (Review font settings) or export anyway (Continue export). The checks are:
Some kerning pairs are silently skipped during export and will not appear in the .fnt file:
The .fnt format supports several features that FNTbyMemeorites does not implement, for example:
pages=1, so all glyphs must fit
on a single texture.info tag
supports padding and spacing values that describe extra space around glyphs in the texture. These are
always exported as zero; if your texture has padding around characters, include it in the region
boundaries instead.| Date | Notes |
|---|---|
| 27. 3. 2026 |
|
| 25. 3. 2026 |
|
| 24. 3. 2026 |
|
Really remove this region?