1. Creating a subset font

    Using custom font faces on a web page introduces several potential issues. Most commonly, these issues manifest in one of two types of problem: the dreaded “flash of unstyled text" (FOUT) or “flash of invisible text” (FOIT); or poor initial render time due to font faces specified in blocking calls to outside services. By placing only a subset font in the critical render path, you can reduce the amount of FOUT/FOIT and speed up the initial render performance.

    However, the creation of the a subset font is not described anywhere that I found. This post discusses how I went about creating a subset font, the tools I used, and some thoughts on what exactly you should subset in your font.