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

knowledgebase

#1

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.

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

Font Squirrel is your best bet:

Another option is Cufon, which generates a javascript snippet from fonts in the .ttf or .otf format that you own for display on the web. The text is not selectable, but it may be useful for headlines where you can’t find the right font on one of the online font libraries above. Cufon generates javascript vectors based on the glyphs in the font, which sometimes causes slowness if used in a large block of text – it’s best to use it sparingly.

For a full guide to implementing Cufon on your site, please see this tutorial. Another very similar method is typeface.js, which also generates a javascript version of your uploaded font. Between the two, it seems more people prefer cufon.


Bizarre problem with font awesome
Knowledge base: Guides from the Tumult Team