The Characters tab on a font collection’s edit page configures how characters are grouped in the frontend Character Viewer component. Each group becomes a labeled section in the viewer, and the order of groups and characters in the admin matches the order on your site.
Default groups
When you first open the tab, Fontdue generates a starting set of groups from the font itself:
- Unicode blocks – characters split by their Unicode block (e.g. Basic Latin, Latin Extended-A, General Punctuation).
- OpenType features – one group per feature exposed by the font, with the feature tag in the label (e.g. Standard Ligatures (liga), Stylistic Set 01 (ss01)). Characters in these groups render with the feature applied.
Fontdue only picks up simple GSUB rules when generating feature groups – direct one-to-one glyph swaps and standard ligatures. Contextual or chaining substitutions, and features that expose multiple alternate glyphs for a single input, aren’t detected and won’t appear as default groups even if they’re listed in the font’s feature table.
These defaults give you a starting map of the font on first load. From there, you can rename, merge, split, and reorder groups to match how you want to present the font on your site.
Editing groups
Each group is a card in the list with an editable name, the characters it contains, and a drag handle on the left.
- Rename a group – click the name field at the top of the card and type. Group names are required and save automatically.
- Reorder groups – drag the handle on the left of a card to move it up or down.
- Add a new group – Add empty group in the toolbar creates a blank group at the bottom of the list; give it a name, then drag characters into it. To create a group already filled, drag one or more characters and drop them into the gap between two existing groups – a new group appears in that position holding the dropped characters, ready to name.11The gap expands into a labelled drop target only once the drag has rested over it for a moment, so sweeping the cursor down the list doesn’t open every gap.
- Delete a group – empty groups show a trash icon in the header. Move characters out first, then click the icon. Groups that still contain characters can’t be deleted directly.
Importing groupings from another collection
Once you’ve arranged one font’s characters the way you want, you can reuse that arrangement on another font instead of rebuilding it from the defaults. Import groupings in the toolbar opens a panel listing every other collection that already has groups, each with its group count. Pick one and Fontdue replaces the current groups with a copy of that collection’s.
The copy is adapted to this font: only characters the font actually contains are kept, matched on both the character and its OpenType features, so a ligature or stylistic alternate this font doesn’t have is left out rather than imported as an empty slot. Any character that doesn’t land in an imported group stays in the Ungrouped pool.22If the font’s glyph set can’t be read, the groups are imported exactly as they appear in the source collection rather than dropping everything – review the result and remove anything this font doesn’t support.
Importing replaces every existing group, and like the rest of the tab it isn’t saved until you click Save. You can import, adjust, and then reload the page to discard the result if it isn’t what you wanted.33Only collections that already have at least one group appear as a source. A collection you haven’t grouped yet won’t show up in the list.
Reordering and moving characters
Characters within a group can be dragged to a new position in the same group, into a different group, into the gap between two groups to start a new group there, or into the Ungrouped pool on the right.
- Drag a single character – click and drag from one slot to another.
- Select multiple characters – click a character to select it, then shift- or cmd/ctrl-click additional characters to add them to the selection. Drag any one of the selected characters and the whole batch moves together.
Selected characters stay highlighted while you’re working with them, so you can build up a selection across a group before dragging.
Characters carry their OpenType features with them as you move them, so a single group can mix plain characters with feature-dependent ones. Pull a few ligatures out of Standard Ligatures (liga) and a handful of alternates out of Stylistic Set 01 (ss01) into a custom Ligatures and alternates group alongside regular glyphs, and each character renders with its own feature applied.
Ungrouped characters
The Ungrouped section on the right lists every character in the font that doesn’t belong to any group. Drop characters here to remove them from groups without losing them – they stay in the pool, ready to be dragged back into a group later.
Ungrouped characters are not shown on your site. The Character Viewer component only renders the groups in the list on the left, in the order they appear.
Inspecting a character
Hover any character in the editor to see its details in the inspector at the top of the right column:
- Codepoint – the character’s Unicode value in hex and decimal.
- Name – the character’s Unicode name.
- OpenType features – for characters that need a feature to render (ligatures, stylistic alternates, and so on), the features applied. Toggle the Features checkbox to preview the character with or without its features applied.
The toolbar at the top of the tab has a magnifying glass icon that switches between a compact and an enlarged glyph rendering – the compact size makes it easier to reorder whole groups, while the larger size makes individual characters easier to read. Your choice is saved to your account, so it persists across collections and sessions.
How this connects to the frontend
When you embed <fontdue-character-viewer> on your site or use the React <CharacterViewer> component, it fetches the collection’s groups from Fontdue and renders each one as a labeled section, in the order shown here. Characters within a group render in the order you’ve arranged them, with any features attached to a feature group applied to the preview. Changes save as you edit and appear on your site immediately.44If you’ve enabled a deploy hook, content changes trigger a rebuild so the cache updates. Without a deploy hook, your site may cache old data briefly.