# Pick characters for subsetting: a fontdrop snippet


Often you subset by picking a category of characters, say Latin or Cyrillic. But sometimes you want to pick specific characters to include in a subset.

Here's a little JavaScript snippet to help with the hand-picking. It lets you load your font in [fontdrop.info](https://fontdrop.info), pick the characters you want and get a Glyphhanger command to run locally.

(I know there are specialized tools to accomplish the task, but this is quick and easy and all you need is Glyphhanger which you probably have installed already if you're on this site.)

## Step by step

First, open [fontdrop.info](https://fontdrop.info) and drop your font there.

![drop your font in fontdrop](/i/posts/glyphdrop/1.png)

Next, take this script (also available on [Github](https://github.com/stoyan/thedrop/blob/main/glyphdrop.js)):

<pre class="prettyprint">
  (() => {
    const GLYPHS = new Set();
    document.getElementById('glyph-list-end').addEventListener('click', (e) =&gt; {
      if (e.shiftKey) {
        e.stopPropagation();
        const uni = e.target.parentElement.textContent
          .split('Unicode:')[1]
          .trim();
        if (!parseInt(uni, 16)) {
          return;
        }
        if (GLYPHS.has(uni)) {
          GLYPHS.delete(uni);
        } else {
          GLYPHS.add(uni);
        }
        const sorted = Array.from(GLYPHS).sort();
        console.log(sorted);
        if (sorted.length) {
          const file = document.getElementById('message').innerText;
          console.log(
            `glyphhanger --format=woff2 --subset="${file}" --whitelist="U+${sorted.join(
              ',U+',
            )}"`,
          );
        }
      }
    });
  })();
</pre>


You can paste this to the console or you can save it under "Snippets" in your Chrome devtools, so the next time you need it, it's handy. Right click and choose Run.

![snippet in devtools](/i/posts/glyphdrop/2.png)

Now SHIFT+click the characters you want to have in the subset. 

![picking characters](/i/posts/glyphdrop/3.png)

Every time you do it, you see an updated glyphhanger command line.

If you select a character by mistake, click it again to remove it from the subset.

![undo feature](/i/posts/glyphdrop/5.png)

Finally paste the command where your font is to generate the subset.

![the result](/i/posts/glyphdrop/6.png)

In my case the results are:

 * Before: 1.4MB OTF file
 * After: 24K WOFF2 file.
 
Easy-peasy<i class="circle"><s></s></i>