Help

How to install the Ding That fonts and use them in documents, on websites and in WordPress.

Download

Download the zip and unzip it. The fonts folder has one folder per font, each with an .otf, a .ttf and a .woff2 file. The svg folder has every glyph as a picture.

Install

Windows

  1. Open the fonts folder and the folder for the font you want.
  2. Right-click DingThat…-Regular.otf and choose Install, or Install for all users.
  3. Restart any app that was already open.

macOS

  1. Double-click DingThat…-Regular.otf.
  2. In Font Book, choose Install.
  3. Restart any app that was already open.

Linux

Copy the .otf files to ~/.local/share/fonts, then run fc-cache -f.

Install one format only. If you install both the .otf and the .ttf of the same font, some apps show it twice.

Use them in documents

Choose Ding That GUI, Ding That Shapes or Ding That Objects from the font menu, then type. Change the size and colour the same way as any text. The Fonts page lists the key for every glyph.

Google Docs and other web apps can only use their own font lists, so installed fonts don’t appear there. Use the SVG files instead: insert them as images.

Draw boxes with the GUI font

Set the line spacing to single, or exactly 1.0, so the lines touch. Then use the keys laid out like the box:

Typed as:

qrwre
f f f
arsrd
f f f
zrxrc

Hold Shift for double lines. r is a horizontal line and f a vertical one.

Use them on a website

Upload the .woff2 files to your site, then add them to your stylesheet:

@font-face {
  font-family: "Ding That Objects";
  src: url("/fonts/DingThatObjects-Regular.woff2") format("woff2");
  font-display: block;
}
.ding { font-family: "Ding That Objects"; }

Then put the key inside an element with that class:

<span class="ding" aria-hidden="true">h</span> Home

Use them in WordPress

This site’s theme includes the three fonts and a shortcode. Use it in any Shortcode block or paragraph:

[ding font="objects" key="h"]
[ding font="shapes" key="v" label="Done"]

Without a label, the glyph is decorative and hidden from screen readers. With a label, screen readers announce the label instead of the letter.

Make them accessible

  • A screen reader reads the letter you typed, not the picture. So if a glyph is decoration, hide it with aria-hidden="true".
  • If a glyph carries meaning on its own, such as a check mark in a table, give it a text label, or write the meaning next to it.
  • Don’t use a dingbat font for long text or for the only copy of important information.
  • Text like ┌─┐, ★ or ✈ that uses the real Unicode symbols is read by its Unicode name, for example “black star”.

If something looks wrong

  • Letters show instead of pictures. The text isn’t set in a Ding That font, or the font isn’t installed. Select the text and choose the font again.
  • Gaps between box lines. Set line spacing to single, or exactly 1.0, and paragraph spacing to 0.
  • Boxes don’t line up. Use Ding That GUI for every character in the drawing, including spaces.
  • The font doesn’t appear in an app. Restart the app. If it still doesn’t appear, the app may not use installed fonts.
Scroll to Top