Typography pairing guide
Help
Short answers to what goes wrong most often.
The text looks like Georgia or a plain system font
The pair's fonts are still arriving. Until they land, the preview shows the fallback from the font stack, then swaps to the real font. This takes a moment on a slow connection. See font loading.
The text runs past the frame
The preview scrolls. Scroll inside the frame with a mouse wheel or trackpad, or drag with one finger on a touch screen. Large headings and long layouts, such as Article, need it most.
Why is there only one weight to pick?
Each of the ten faces ships in one weight, so the weight rows show only that one: 700 or 400 for headings, 400 for body text. The weights in the CSS match.
The copied CSS has no sizes or letter spacing
That is how the tool works: the CSS holds the font stacks, the weights and the line height only. Add your sizes and letter spacing by hand. The keep page has the details.
The fonts do not show on my own site
The CSS names the fonts but does not load them. Host the font files yourself and add an @font-face rule for each. The fonts are under the SIL Open Font License 1.1 (/lab/fonts/OFL.txt), which allows this.
Heading size does not change the Dashboard numbers
The three big numbers have a fixed size. Heading size changes the title and the task heading in that layout.
Does it work on a phone or tablet?
Yes. The controls sit in a bar at the bottom of the screen; tap it to open them. On narrow screens the preview has less padding, the cards stack, and the Dashboard numbers are smaller.
Copy did nothing
Some browsers do not let a page write to the clipboard, and the tool says Copy failed or Copy is not available here. Select the text in the CSS output box and copy it by hand.
Is anything uploaded?
No. The preview is drawn in your browser, and nothing is sent anywhere. The fonts come from this site, not from an outside server.
Are there keyboard shortcuts?
The tool has none of its own. Anywhere in the lab, Ctrl K, or Cmd K on a Mac, opens the list of all tools.