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.
- 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.
Reordering and moving characters
Characters within a group can be dragged to a new position in the same group, into a different group, 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.11If 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.