About Fonts & Text | Using Typekit, Google Fonts, Font Awesome

A great place to start if you're curious about how Hype works with fonts is the Typography chapter of our documentation.

Tumult Hype includes support for easily adding any font offered by Google Fonts to your document. You can also quickly add custom web fonts you define in the Add Fonts… button in the document inspector. Want to download Google Fonts and use them as custom fonts? Use this awesome tool.

For an introduction to some concepts in web typography, read this post.

Using Typekit

To embed a Typekit font, you'll first need to setup your Kit in Typekit. Once you add a font, and Publish your font kit, you should receive a CSS URL which you can use in Tumult Hype. Here's how that looks:

Copy that entire line, and create a new Custom Font in Tumult Hype:

54%20PM

Add that line to the <head> of your document.

Now, you have access to any Font family created by this kit. To add a Font Family to a font, you would first copy it from this page:

Now, back in Hype, your Add Font box should look like this:

This will confirm for you that your Font-family is correct. You can now remove the line in the 'Embedded Head HTML' since you already added this. Including it in this font definition will include that CSS twice.

Font Awesome, or icon-based fonts

Add Font Awesome to your document by using the CDN version of Font Awesome. The current version is 5.0.6. Add the following to the head of your document:

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

Next, uncheck 'Protect from External Styles' in the Document Inspector, create an element, edit its inner HTML (Edit > Edit Inner HTML), and insert your font awesome icon code:

<i class="fa fa-camera-retro"></i> 

Example document: font-awesome-5.hype.zip (127.5 KB)

For more icons and icon-based fonts, please see this page.

Using fonts from your Computer

First, double check that your font is not on Google Fonts or searchable from within Hype's font system. Next, you'll want to generate CSS for your font. Font Squirrel is your best bet for getting this done: Quickly embedding custom fonts in your Hype document using Font Squirrel

6 Likes