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.
- Feature pairs – one group for each pair of features that together reach glyphs neither reaches alone, labelled with both features (e.g. Small Capitals From Capitals + Tabular Figures (c2sc + tnum)). Each character renders with both features applied. Tabular oldstyle figures, which need both oldstyle and tabular figures switched on, get their own name: Tabular Oldstyle Figures (onum + tnum).
Fontdue reads three kinds of GSUB rule when generating feature groups: direct one-to-one glyph swaps, standard ligatures, and alternates. For an alternate, only the first glyph in the set is picked up, since that’s the one a feature switched on with its default value renders.11An aalt that lists three alternates for 1 shows the first of them. The others are only reachable by choosing a specific alternate number, which the Character Viewer doesn’t do. Contextual or chaining substitutions, and rules that replace one glyph with several, 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.22The 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.33If 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.44Only 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.
Resetting to the default groups
Once a collection’s groups have been saved, Reset to default in the toolbar replaces them with freshly generated default groups, built from the font as it is now. Use it to start over after a grouping has gone in a direction you don’t want to keep. After you confirm, the editor shows the defaults straight away, and they replace your groups when you click Save. Reload the page instead of saving to keep the groups you had.
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.
The pool is worked out from the font files each time the tab opens, so after you upload a new version of a font, characters it adds show up here, ready to be grouped.55Fontdue reads the characters from the first style of the family’s current version.
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.66If 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.
aalt that lists three alternates for 1 shows the first of them. The others are only reachable by choosing a specific alternate number, which the Character Viewer doesn’t do. ↩