Add A Ligature To A Font With The Glyphs Mini App On The Mac

Transcript

Hey folks, I'm Alan, and this is how to add a custom ligature to a font using Glyphs Mini 2.

Glyphs Mini 2 is a paid mac app. It currently 49 pounds on their website and also avaialble via a subscription to SetApp which I see as ten bucks a month U.S.

I'm using the 30day free trial version for this video which is, as far as I can tell, fullly functional.

The example ligature I'm making turns the javascript keyword "this" followed by a period into a single character. Here's what it looks.

The font I'm adding the ligature to is Fira Mono which I downloaded from Google Fonts. I picked that font because it's not a variable font. The first font I tried was Roboto Mono which is a variable font but it didn't work right.

It's possible this approach works with variable fonts and I just did something else wrong, but I'm sticking with the non-variable types for now.

When you first open Glyphs Mini 2 the app presents you with the starting point for a new font. Since we want to add a ligature to an existing font, we can just close that and use "File - Open" to navigate to the font file we want to start with.

The Fira Mono I got from Google Fonts has a few versions: Bold, Medium, and Regular. The only one I plan to use is "Regular" so we can open it.

The file starts in a "Locked" state. If we try to change things we'll get a warning that we can't and that we need to do a "Save As". The file menu doesn't actually have "Save As", but we can do "File - Save" instead and give the file a new name to get things to work.

We'll name this one "Alan Custom Fira Mono"

The first step to adding the ligature is to pick the "Glyph - New Glyph" menu item and then scroll down to the bottom of the main window to find our new, empty glyph

The text I'd like the ligature to replace is the word "this" followed by a period. We need to rename our new glyph following three rules to make that happen.

First, we'll spell out the word "this" separated by underscores

Next, we'll add another underscored followedy by the word period typed out.

and finally we'll add ".liga" to the end of the name.

Note that when you change the name, the glyph jumps around in the main window and you may have to go find it.

Double clicking on our freshly renamed glyph opens it to show an outline of the "this" and "period" that we'll be replacing.

We could use the drawing tools to design our glyph or we can copy in the contents from other glyphs to make the design. For this video I'm going to do the latter.

Going back to the "Font" tab, I'm going to pick the "Box Down Double And Horizontal Single" glyph which makes a nice "T" and double click it to open it.

We can use "Edit - Select All" from the main menu, then "Edit - Copy" to grab the glyph, go back to our new one, and do "Edit - Paste" to copy it over.

Since we want the ligature to replace the period as well as the "this", We can do the same copy and paste routine with it.

We can click the eyeball icon in the lower left corner to open a preview line where we can see how the glyph will render. From here we can move things around until we get them how we want.

The last step before export is to give our version of the font a new name.

To change it, we'll open the "File - Font Info" menu to make the update. Since we made named the file "Alan Custom Fira Mono" we can name the font the same thing

One thing to note is that even though the word "Regular" is on the same line as the rest of the text, it's not part of what we're editing so we'll leave it alone.

The final step in making the font is to pick "File - Export" from the menu bar. This opens the export window where we can just leave the defautls and press "Next". which in my case drops the new file in my downloads folder next to where the original font folder was.

Now that the fonts made, we need to install it. We can do that with the built-in Font Book app that resides in the Applications folder.

Once you open it, go to "File - Add fonts to current user" in the menubar then navigate to the newly created font file and click "Open".

After a quick validaiton the new font should show up in your list.

To use the font in VS Code, we'll need to make two updates.

First we need to set the font name in the "Editor: Font Family" setting. Enter the name we used for the font make sure to leave off the word "Regular" at the end in the same way we ignored it when renaming the font.

So, in our case, it's "Alan Custom Fira Mono" and note that becaue there are spaces in the name of the font we need to put the name inside single quotes.

Next, we need to tell VS Code to use the ligatures. This is done with the "Editor: Font Ligatures" setting.

For my version of VS Code, I have to change the "Editor: Font Ligatures" setting directly in my settings JSON. I get to it by searching for "ligature" then clicking "Edit in settings.json".

My VS Code defaulted the value to "false" which I changed to "true". And, with those two things in place, the ligatures should do their thing.

I hope you've enjoyed the video. Please like and subscribe and if you'd like to see more of my stuff swing by my main site at alanwsmith.com which is always a work in progress