Many designers know that you can download the fonts from Google Fonts, although it’s not immediately obvious how to do it (I always forget!). Even if you do figure it out, the source font > download font > install font > sample font workflow can become very tiresome after a while (especially when you’re using multiple fonts that need to complement each other).

Let's discuss a better way of sourcing, installing, and testing fonts in Sketch, and managing the chosen fonts in the Sympli Handoff web-app after the design has been handed off to the developers.

We’ll start with Sketch. Like I said, many of us designers use Google Fonts because it’s a pretty easy way to “install” fonts on your website using web code, but when we need to sample fonts in design files it’s not as easy. It involves a lot of sourcing, downloading, installing, sampling, and then a repeat of all that if it turns out the font wasn’t suitable. Skyfonts changes that.

SkyFonts is an app for Windows/macOS that lets you download fonts from Google Fonts with a single click, as well as “try-before-you-buy” premium fonts from websites like MyFonts and Fonts.com. It’s far easier than installing fonts manually.

As well as that, fonts can be stored safely in the cloud so they don’t take up too much space on your hard-drive. Afterward, you can use the fonts in Sketch (and Photoshop too) with ease.

Skyfonts is free so it’s an epic choice, but then there’s Fontea which is also free but works as a plugin. At this moment in time it’s compatible with Photoshop, but not Sketch, however, I thought I would list it here as I know many designers like to keep their workflows in a single app. It’s always nice to have alternatives, right?

When you need to hand off the design to developers, you can do one better than exporting the design using the Sympli Handoff Plugin for Sketch, you can also use the Font Packer Plugin by Bigxixi, which collects all of the fonts used in your design and copies them into a more-accessible folder on your computer. You can then upload these fonts to what Sympli calls a "Brandbook".

Just hit control + shift + T to export the fonts.

Brandbooks are quick-reference sheets for developers — they contain all of the colors and fonts used in the design.

You can start a new brandbook by navigating to the project summary. When you uploaded your design to Sympli Handoff via Sketch, the app already extracted the colors and fonts used; now we need to select which colors and fonts to include in the brandbook.

Select a brandbook (or create a new one) from the dropdown titled “Brandbook”; then, select the colors you want to add to the brandbook by hovering over the color and clicking the “brand” button; then, finally, click the attachment icon next to the fonts. Choose the fonts as exported by Font Packer.

Now developers can navigate to “Brandbooks” from the menu bar to see a summarized view of the colors used in the design, as well as download the fonts that you used — this means that the developer doesn’t have to try and source the fonts themselves, and risk downloading a slightly different/broken version of it.

Little additions/changes (such as these ones!) can significantly enhance your workflow. It might not seem like it, but every little hiccup in your process, no matter how small, eventually adds up to a greater loss of time. If you find yourself wasting far too much time downloading and installing fonts, then try out these tips, and of course, let us know if they worked out!