Electron Adventures: Episode 12: Google Fonts for our Terminal

What if we don't want to use builtin fonts? Normally we'd go to Google Fonts and get something, but Electron apps really shouldn't use CDNs if it can be helped.

We'll use episode 10's code as base, but episode 11's jQuery version would work just as well, and nothing here is really entangled with our other choices.

Choosing monospace font

Terminals traditionally use monospace font, and a lot of terminal apps wouldn't work correctly if we use something else. Google Fonts doesn't actually have that many interesting terminal fonts, but one looks fun and quirky - Nova Mono. So we'll try that one.

CSS @font-face declaration

It's not all that complicated to download CSS and edit it locally, but someone already did that work for us, and we can go to Google Webfonts Helper app and check our font there.

If you use default settings you'll get a list of 6 font declarations and way too many files to download:

/* nova-mono-regular - latin */
@font-face {
  font-family: 'Nova Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nova-mono-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/nova-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nova-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nova-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nova-mono-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nova-mono-v13-latin-regular.svg#NovaMono') format('svg'); /* Legacy iOS */
}

But we know the browser we'll be using! It will be latest Chrome. If we press "Modern Browsers", we get much more reasonable list:

/* nova-mono-regular - latin */
@font-face {
  font-family: 'Nova Mono';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/nova-mono-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nova-mono-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

But we really don't even need the woff1 part.

We can simplify this even further. Also adjust to just the url to where the font is going to be relative to your CSS file. For now I'll just dump them all into the same folder:

@font-face {
  font-family: 'Nova Mono';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('nova-mono-v13-latin-regular.woff2') format('woff2');
}

All this assumes we know for sure what we're doing is going into an Electron-only app. If you're writing code that will operate both in Electron and online - like Slack client - then keep the whole list, and all the files.

Download the font

Download the zip, and drop nova-mono-v13-latin-regular.woff2 in your app's main folder. Or in some subfolder if you want to organize your files in a specific way.

Use the font

Now we just need to change references to our font. I kept the monospace fallback out of habit, even though we fully control the browser, and have font file bundled with our app, so it's hard to come up with a scenario where this would be useful.

h1{

  font-family: Nova Mono, monospace;
}

#terminal {
  font-family: Nova Mono, monospace;
}

input {
  font-family: Nova Mono, monospace;
}

Result

And here's the result:

In the next episode we'll finally get to the long promised bundlers like rollup and webpack.

As usual, all the code for the episode is here.