Loading custom fonts from disk, using @font-face

• I am on the latest Hyper.app version

• I have searched the issues of this repo and believe that this is not a duplicate

• OS version and name: macOS 10.13.4

• Hyper.app version: 2.0.0

• Link of a Gist with the contents of your .hyper.js: https://gist.github.com/LinusU/a8d67a9459c989028682803a1a4307e7

• Relevant information from devtools: N/A

• The issue is reproducible in vanilla Hyper.app: Is Vanilla

Issue

With the upgrade to the canvas based renderer in Hyper 2.0, loading custom fonts via css @font-face isn't working that great.

Currently, the first thing I have to do when starting Hyper is to reload the view. Before I do this the font is not displayed properly.

This is because xterm.js is drawing a char atlas to a canvas, and caching the width and height for each char.

The canvas drawText function doesn't wait for the font to be loaded, and thus the cached data (char atlas and char dimensions) becomes that of the fallback font.

Non-ascii characters, which aren't drawn using the char atlas, seems to be using the correct font.

I'm not sure exactly how to solve this. If there is an api to hook into to know when the font has loaded, we could probably expose a method in xterm.js to redraw the cache (which could possibly help solve #2876 as well), and then hook it all up. Suggestions welcome!

Start with the Hyper renderer and xterm.js canvas char-atlas path, using the linked .hyper.js configuration to reproduce custom @font-face loading. Determine how font readiness affects cached character dimensions, then verify that a custom font displays correctly on the initial load without requiring a reload.