Font Library User Guide

The Font Library lives at /tool/font/. It does three jobs that are usually spread across three different products: it is a catalogue you browse, a specimen studio you test type in, and a font CDN you can embed from or download out of.

The catalogue is a fixed build. Nothing is fetched from a third-party font service while you use it, and nothing about your session is sent to one. The numbers in the hero badges come straight from that build:

Who it is for: a designer choosing type and wanting evidence rather than vibes, and a developer who wants a font on a page without a third-party request. Both paths start on the same grid.

• Designer path: preview with real copy, open a family, read the suitability scores and pairings, compare two or three candidates side by side.
• Developer path: find the family, open Use & Embed, copy one line, or download the self-hosting ZIP and drop it in the project.

Related tools on the site: Icon Library works the same way for icons, and the Design System Generator links out to this page when you are picking a heading face for a design system.

Open /tool/font/. The catalogue loads, the hero badges fill in, and the grid starts painting specimen cards. Each card renders its own family name in the actual typeface. Fonts are registered only as cards approach the viewport, so the page does not try to download thousands of files at once — scrolling is what loads type.

The grid pages itself. As you scroll, another 48 families are appended, and it keeps going until the current result set runs out. There is no page-number control.

The three views

Under the header there is a row of three views: Specimens, Collections and Selected, each with its own count. Search, filters and the preview controls all live on Specimens.

There is no step order to follow: you can go straight to a family and download it if you already know the one you want.

What you see before you filter anything

The Collections view holds six curated collections: Popular Fonts, New Fonts, Best UI Fonts, Best Accessibility Fonts, Best Developer Fonts and Best Editorial Fonts. Each is a row of small specimen cards; clicking one opens that family. If you have no particular family in mind, this is the cheapest place to start.

As soon as you star a family, a Download selected button appears at the foot of the filter rail, so the end of the workflow is always one click away.

Keyboard

Pressing ? opens a command palette: a fuzzy search over the library's commands, with arrow keys to move, Enter to run and Esc to close. It also lists every category tab as a Category · … jump command. If you only remember one shortcut, remember this one.

Shortcuts are ignored while you are typing in a field. Two keys that look like they should work — f for filters and r for the recommender — are bound twice and cancel themselves out; use the Filters and Recommend buttons, or the palette, instead. This is covered again in section 12.

The single most useful control on the page is the text field above the specimens, marked Type to preview every family…. Type into it and every visible card repaints in your copy instead of its own family name. It updates as you type, with a short pause so the grid is not rebuilt on every keystroke.

Type the words you will actually set. A product name, a headline you are drafting, your worst ampersand-and-numerals string, the one word with a tricky ligature. Family names are a poor test because most of them are chosen to look good.

A practical sequence: type your headline, switch to list view, drag the Size slider up, then scroll. You are now reading your own words in 48 typefaces at a time, which is the comparison that actually decides things.

Search

The Search field in the results toolbar does a plain substring match. It looks at three things: the family name, the designer, and the category. So garamond, steve matteson and monospace are all valid queries. The count to the right of the toolbar updates live to tell you how many families match.

The placeholder mentions foundries, but the foundry or publisher field is not searched. If you are hunting by foundry, search a designer you know works there, or open a likely family and read the About tab.

Category tabs

The Category chips at the top of the filter rail are the primary filter: All followed by the five categories ordered by how many families each holds — Serif, Sans Serif, Handwriting, Monospace and Display — each with its own count. Only one can be active at a time, and picking one clears the previous. Categories combine with search and with everything in the filter panel.

Sorting

The sort menu changes the order of the current result set. Three of the options sort by a computed score, explained in section 8.

Surprise me is a genuine reshuffle, not a stable order: it re-rolls every time a filter changes, so do not use it to hold a position while you narrow things down.

Recently viewed

Every family you open is remembered. A Recently viewed chip strip appears above the results holding up to twelve names, and clicking a chip searches for that family again. It survives a reload, so you can come back tomorrow and pick up the shortlist you were circling.

The filter rail on the left holds groups of chips, and the Filters button shows or hides them. Chips toggle; click again to switch one off. Every change re-runs the filter immediately and rebuilds the result list from its first page of 48.

The distinction to internalise: weights, scripts, features and properties are AND conditions — more chips means fewer results. Licence and source are OR conditions — more chips means more results. If a filter stack goes empty, that is usually a weight or script chip you forgot about.

Library versus System

190 of the 2,213 families are System: fonts catalogued from the machine the build ran on, recorded by name rather than as a served file. They are marked Installed on the card, they only render for you if you happen to have them installed, and their download buttons read Installed only and do nothing. If you are picking type to ship, set the Source filter to Library and stay there.

Reset all filters, at the bottom of the panel, clears every chip, the search box and the category tab in one go.

Recommend, in the rail, opens ✨ Find your font: a short brief instead of a filter. You describe the work, it ranks twelve families and tells you why each one is on the list. Use it when you know the project but not the typeface.

Press Recommend fonts. Each result carries a match score from 40 to 99 and a one-line reason naming the family's two strongest traits, plus an accessibility figure when the family scores 80 or above. Reset clears the brief.

Feeding it a palette

Paste hex codes into the palette field — #0F172A #F8FAFC #3B82F6 — and swatches appear as you type. The colours are read for four things: whether the palette is warm or cool, how much contrast it has, how saturated it is, and how dark it is. Those become style traits, which then steer the ranking the same way the style chips do. The note line tells you what the palette read as, so you can tell whether it heard you correctly.

Roughly what it does with a palette: cool colours with strong contrast read as modern and minimal, and technical too if they are also desaturated; warm and saturated reads as playful, friendly and bold; dark and muted reads as elegant and classic; near-greyscale with low contrast reads as minimal and classic. If nothing else matches, it falls back to modern and minimal.

This is the natural handoff from the colour tools. Pick a palette from the Palette Library or build a system in the Design System Generator, then paste those hex values here.

One important limit: recommendations only ever rank inside a curated pool of roughly 130 mainstream families named in the engine's own seed list. It will not surprise you with something obscure. The full 2,213 are still there in the grid and the filters — the recommender simply refuses to make a confident claim about a family it was not vouched for.

Click a card — or focus it and press Enter — and the detail drawer opens, docked to the right of the grid (a bottom sheet on narrower screens), so clicking another card simply swaps it. The header gives you the name, the category, the designers, how many styles it ships, how many variable axes it has and how many glyphs are in it, plus ＋ Select and Download kit buttons. Close it with ✕ or Esc; on the bottom sheet, tapping the dimmed page also closes it.

Eleven tabs run across the drawer:

The specimen tester

The Specimen tab is an editable block. Click into it and type, or select text and restyle it. The toolbar gives you bold, italic, underline and strikethrough, three alignments, a weight menu, and number inputs for size, line-height and letter-spacing. The colour picker applies to your selection if you have one, and to the whole block if you do not. ↺ puts everything back.

Seven sample presets sit below it: Pangram, Paragraph, Alphabet, Uppercase, Numbers, Symbols and Code. Numbers is where you find out whether the figures are lining or oldstyle and whether the currency symbols were drawn with care. Code drops the size and switches on contextual alternates and ligatures, so you see the family as a code editor would render it.

Variable axes

If the family is variable, each axis gets its own labelled slider showing the tag and the range — wght, wdth, opsz, slnt and whatever else the family exposes. Drag one and the specimen changes as you drag. Named instances appear as chips below; clicking one snaps every axis to that instance's coordinates and updates the weight menu to match.

This is the honest way to judge a variable font. A family can have a beautiful regular and a 500-weight that goes soft, or an optical-size axis that only earns itself above 40px. The sliders show you that in a second; a static specimen sheet never will.

OpenType toggles

Under the axes the drawer lists the family's real OpenType features — only the ones it actually has — grouped as Ligatures, Letterforms, Figures & numbers and Spacing, with any stylistic sets and character variants after them. Toggle a chip and the specimen changes live. Stylistic sets are worth clicking through one at a time: they are where a family often keeps its single-storey a, its straight-legged R or its alternate g.

Suitability

The Suitability tab shows five rings: Accessibility (legibility for the widest audience), Readability (comfort in long-form body text), UI / Product (clarity at small sizes), Developer / Code (monospacing and glyph disambiguation) and Editorial (headlines and print character). They are computed from the font's own outlines and metadata, not voted on.

Read the bands rather than the exact numbers:

Why these scores opens the working. Six measured signals are listed: x-height with its value in em, character distinction (whether I, l and 1 are told apart, and 0 from O), proportion, weight flexibility, screen rendering, and low stroke contrast. When a score surprises you, this is where the reason is. The tab also derives Best for tags and an eight-trait style fingerprint — the same traits the recommender matches against.

Treat these as triage. They narrow 2,213 families to a handful worth reading properly; the decision is still made by looking at your own copy in the specimen.

Pairings

The Pairings tab ranks eight partners with a score from 60 to 99 and shows a live heading-plus-body preview for each, so you are judging the pair rather than two names. The ranking weighs how well the categories go together, whether the partner is strong at the role the pairing needs, how close the two x-heights are, and the partner's own quality scores. A Super-family badge means the partner shares the family's first name token — the sans-and-serif siblings that were designed together.

＋ Select both puts the pair in the tray in one click, which is the fastest route to a two-font embed. Open followed by the partner's name jumps to the partner's own drawer. Handwriting families are never offered as partners, and — like the recommender — pairings are drawn from the curated pool, not the whole catalogue.

Glyphs

Every mapped codepoint, rendered in the family, 600 at a time behind a Show more glyphs button. A slider sizes the cells from 18px to 80px. Click any glyph to copy the character; a toast confirms with its U+ codepoint. Use it to check that the accented characters, currency symbols or arrows you need are genuinely drawn rather than substituted.

The map stops at 8,000 codepoints, so a CJK-scale font is shown in part. For those, read the Charset tab instead.

Features gallery

Where the Specimen tab lets you toggle features on your own text, the Features tab shows each one as a default-versus-enabled comparison with a sample chosen for that tag — fractions get a fraction, tabular figures get a column of numbers. Click a row to copy its CSS:

font-feature-settings: "tnum" 1;

Charset

The Charset tab is the language answer. It lists chips for every unicode script block the family supports, the mapped-character and in-font glyph counts, the first and last codepoint, the first 40 unicode ranges, and a sample line set in the family. If you need Devanagari or Cyrillic, check here before you commit — a family with 250 glyphs is a Latin-only family whatever its name suggests.

Read this tab before you ship. It names the licence — in this catalogue that is Open Font License, Apache 2.0, Creative Commons, MIT, Custom or Unspecified — links to the licence URL and to the licence file that was bundled with the font, gives a plain-language note, and loads the full licence text on demand.

Above that sits a six-cell permissions grid. It answers the six questions people actually ask:

The grid is a summary generated from the licence and the font's metadata. It is a fast filter, not legal advice — for anything contentious, read the licence text on the same tab. Where a family is marked Unspecified or Custom, treat the summary as a prompt to go and check the source rather than as an answer.

About

The About tab is the provenance record: designer or designers with their URL, the foundry or publisher with a vendor URL, category, whether the outlines were detected as serif, the version number, created and modified dates, the outline format (TrueType or PostScript/CFF), the style and weight lists, the variable axes, the glyph count, embedding rights, whether the family is a library font or a system one, and the description, copyright and trademark strings the file carries.

Two fields here decide arguments. The version tells you which release of a family you are looking at — families gain glyphs and axes between versions. The modified date tells you how old that release is.

Use & Embed is the tab that turns a decision into code. Six tabbed snippets, each with a Copy button, all pointing at self-hosted files. Above them is a row of weight chips you can toggle to mark the weights you intend to use; they are a note to yourself, not a control — the snippets below are generated from the whole family and do not change when you toggle them.

The Link snippet is one line:

<link rel="stylesheet" href="https://fonts.auricartisan.com/css/inter.css">

The Script snippet loads whatever families you name on the tag:

<script src="https://fonts.auricartisan.com/font-cdn.js"
        data-families="Inter"></script>

And the JS form gives you a promise to wait on:

AuricFonts.load('Inter').then(() => {
  document.body.style.fontFamily = "'Inter', sans-serif";
});

That loader accepts weights in the shape you would expect from other font services — Inter:wght@400;700 or Inter:400,700i — and resolves once those weights have actually loaded.

Developer exports

The Develop tab starts with a ready font-family stack: the family plus a fallback chain chosen for its category, so text still renders sensibly before the font arrives. Under it, five export formats behind tabs, each with Copy:

Modular type scale

At the bottom of the Develop tab there is a scale generator. Set a base size between 10px and 24px and pick a ratio — 1.125 Major Second, 1.2 Minor Third, 1.25 Major Third, 1.333 Perfect Fourth, 1.414 Augmented Fourth, 1.5 Perfect Fifth or 1.618 Golden Ratio — and it produces nine named steps from xs to 4xl, each with its pixel and rem value and a line-height, previewed in the family you are looking at. Copy CSS emits them as custom properties:

:root {
  --text-xs: 0.694rem;
  --text-sm: 0.833rem;
  --text-base: 1rem;
  /* … through --text-4xl */
}

Seeing the scale set in the actual family matters. A ratio that looks right in the abstract can collapse in a face with a large x-height, where 1.2 leaves the heading and the body looking like the same size.

The tray

The star button on a card — or ＋ Select in the drawer — adds a family to the selected tray. A floating button shows the count; opening it lists the members with remove buttons and four actions along the bottom: Embed, Download, Compare and Clear. The selection is stored in your browser, so it survives a reload and is still there when you come back.

Compare

With two to four families selected, Compare (or c) builds a side-by-side table across fourteen rows: the specimen itself, category, designer, weights, variable axes, x-height, glyph count, how many OpenType features each has, all five suitability scores colour-coded, and the licence. Column headers are clickable and reopen that family's drawer.

This is the shortlist step. Filter down to five candidates, star three, compare, then read the two survivors properly in the specimen.

Combined embed

The tray's Embed button reuses the drawer to show one block covering every selected family at once: all the stylesheet links, an equivalent single loader script tag naming them together, and a :root block of --font- custom properties so you can refer to each family by name in CSS. There is a Copy all button. For a heading plus body pair this is the whole integration.

Download kits

Download kit in the drawer, or Download in the tray, builds a ZIP in your browser. Nothing is generated on a server; the font files are fetched and packed locally. Every family gets its own folder inside the archive, holding:

Selecting several families produces auric-font-selection-kit.zip with the same structure per family. If any file could not be fetched, a DOWNLOAD_NOTES.txt at the top of the archive names it, so check for that file before assuming the kit is complete.

Two things to expect. The ZIP is uncompressed and assembled in memory, and the font files are fetched one after another — a large multi-family selection takes a while and is memory-heavy, so download in batches rather than starring thirty families and hoping. And system fonts cannot be downloaded at all: their button reads Installed only.

If you want a single style rather than the whole family, the Styles tab has a table of every file — style, weight and name, width, format or ⚡ Variable, byte size, glyph count — with a direct download link on each row.

None of these stop the tool working. They are the things worth knowing before you rely on it.

Things that behave differently from how they look

• Search does not cover foundries. The placeholder says it does; the match runs over family name, designer and category only.
• f and r do nothing. Both keys are bound twice, so the two handlers open and immediately close the panel. Use the Filters and Recommend buttons, or the ? palette.
• A ?q= link does not pre-filter. Other tools link here with a family name in the query string, but the page does not read it — you land on the unfiltered grid and have to search for the family yourself.
• Surprise me is not a stable shuffle. The order re-rolls on every filter change, and it is not a uniform random order.
• Recommendations and pairings are drawn from a curated pool. Roughly 130 mainstream families are eligible; the rest of the 2,213 can be found and used, but will never be recommended or offered as a partner.

Scope of the data

• The catalogue is a snapshot. It was built on 2 June 2026. New releases and new families appear only when the catalogue is rebuilt; nothing updates while you are on the page.
• 190 families are system fonts. They count toward the 2,213, render only for visitors who happen to have them installed, and cannot be downloaded. Filter Source to Library when picking type to ship.
• The glyph map is capped at 8,000 characters and the Charset tab shows the first 40 unicode ranges. For CJK families, read the counts rather than scrolling the grid.
• Suitability scores are computed, not curated. They come from measurements of the outlines and metadata. Use them to triage, then judge with your own copy.

Performance and connectivity

• Opening a family downloads a batch of metadata. Detail records are grouped alphabetically, so the first family you open in a group pulls several megabytes. Subsequent families in the same group open instantly. On a slow connection, expect the first drawer to take a moment.
• Everything comes from one host. The catalogue, the engine and the font files all come from fonts.auricartisan.com. If that host is blocked by a network filter or an extension, the page cannot fall back to anything else — it shows an unavailable notice after about six seconds, and about ten seconds after that a retry panel that tells you whether you are offline or the host simply did not respond.
• The specimen editor uses the browser's built-in rich-text editing. Bold, colour and alignment can behave a little differently between browsers. If a change does not take, press ↺ and try again with a cleaner selection.

A sensible order of work

1. Type your real copy into the preview field before you look at anything else.
2. Set the category, then Source to Library, then any weights you genuinely need.
3. Sort by the score that matches the job, or run Find your font with your palette pasted in.
4. Star three or four candidates and compare them.
5. Open the survivors: check Charset for language coverage, Suitability for the reason behind the score, and Licence for what you are allowed to do.
6. Copy the embed snippet, or download the kit if you would rather host the files yourself.

For icons, the same workflow lives at /tool/icon/. For a full type and colour system built around your choice, use the Design System Generator. All Auric Artisan documentation is indexed at /library/documentation/.