Tumult Hype Documentation — Fonts

Text is central to almost every document, and Tumult Hype offers powerful tools for styling text. Tumult Hype’s Text inspector contains numerous options for customizing text. Change text size, styling, shadows and spacing. Hype also allows you to choose from a set of Web- or iOS-safe fonts, or to even add Web fonts from Google’s Font Directory or from your own curated web font collection.

Choosing Fonts

Changing the font for selected text is as simple as clicking a font’s name in the Text inspector. By default, Tumult Hype offers a set of fonts that are considered “Web safe” and work on a broad array of browsers, as well as a set of fonts available on all iOS devices. Furthermore, you can add fonts from the diverse and free set of web fonts offered by Google’s Font Directory. You can even add your own CSS Web fonts should you have your own set of curated fonts.

Select from the Web, iOS, Google, or Custom font family selection menu to choose different fonts.


Font Family Selection

Adding Fonts

In addition to the default fonts available in Hype’s Text inspector, you can add fonts to your document by choosing fonts from Google’s Web Fonts library, by adding code provided by a 3rd party Web font service, or by adding your own @font-face CSS styles.

Adding Fonts From Google’s Font Directory

Google’s Font Directory contains hundreds of royalty free web fonts hosted on Google’s servers. Adding Google Web Fonts to your document is incredibly simple with Tumult Hype:

  1. Click the Add More Fonts button in the Text inspector.
  2. Choose a font from the list of Google Fonts.
  3. Choose a font weight (if applicable).
  4. Click Add Font.

To use your newly added Google Web Font, select text or an element containing text, and then choose the font from Hype’s font list. You can filter the font list to include just Google Web Fonts by choosing Google Fonts from the filter menu above the font family listing.


Adding a Google Font

Compatibility Note
  • iOS: Google Fonts require a network connection. If you check 'Create offline application cache' in the document inspector, offline users will receive a network error if they haven't yet launched your web app. If they have launched the web app, text using Google Fonts will appear in a fallback font.

Third Party Services

Third party services such as Typekit can be added to the Text inspector’s Font Family list by using the Add More Fonts button in the Text inspector. Many third party libraries require a snippet of code to be placed in the <head>...</head> area of your exported .html file. This knowledgebase article illustrates this process for services like Typekit and Font Awesome. The general steps are:

  1. In the Text inspector, click Add More Fonts.
  2. From the Source drop down menu, choose Custom CSS.
  3. Add a descriptive name for your font in the Display Name field.
  4. In the CSS Font-Family field, add your CSS font-family name.
  5. Based on instructions from your Web font provider, paste any code required into the Embedded Head HTML field.
  6. Click Add Font. Your font is now listed in the Text inspector’s Font Family list.

Troubleshooting: If your font fails to display when editing within Tumult Hype, you may need to add 'localhost' to your list of approved domains. Here are instructions for Typekit, and instructions for Fonts.com.

The below example shows a sample embed code for Typekit. Typekit excludes a protocol from their javascript reference to ensure that the font files are served over https and http:

<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Since Typekit doesn't provide a protocol, your font may not work when previewing on your computer or a local network. You may need to replace //use.typekit.net/xxxxxx.js with http://use.typekit.net/xxxxxx.js to fix this.

Declaring a @font-face style

If you have your own custom web fonts not hosted on other services, add them to Hype by following these steps:

  1. Prepare your CSS defining your custom font face. Our CSS example below loads a set of Futura Bold font files, and links those files to the font family FuturaTOTBold, with Arial and Helvetica as fallbacks:
    <style>
        @font-face {
            font-family: 'FuturaTOTBold', Arial, Helvetica;
            src: url('${resourcesFolderName}/futuratot-bol-webfont.eot?#iefix') format('embedded-opentype'),
                 url('${resourcesFolderName}/futuratot-bol-webfont.woff') format('woff'),
                 url('${resourcesFolderName}/futuratot-bol-webfont.ttf') format('truetype'),
                 url('${resourcesFolderName}/futuratot-bol-webfont.svg#FuturaTOTBold') format('svg');
        }
    </style>
    
    For information regarding this CSS, please see this article on Fontspring.
  2. Click the Resource Library toolbar icon and drag-and-drop each of the font files referenced in the CSS into the Resource Library. For the broadest compatibility, font sets should include the following formats:
    futuratot-bol-webfont.eot
    futuratot-bol-webfont.woff
    futuratot-bol-webfont.ttf
    futuratot-bol-webfont.svg
    
  3. In the Text inspector, click Add More Fonts.
  4. From the Source drop down menu, choose Custom CSS.
  5. Add a descriptive name for your font in the Display Name field.
  6. In the CSS Font-Family field, add your CSS font-family name. Font providers set this name, and typically offer fallbacks as well. For our example, the Font-Family name is 'FuturaTOTBold', Helvetica, Arial.
  7. Paste the CSS code prepared above into the Embedded Head HTML field.
  8. Click Add Font. Your font is now listed in the Text inspector’s Font Family list.

Removing Fonts

Custom fonts and Google Web Fonts added to your document appear in the document’s Resource Library. To remove a font, choose it in the Resource Library click the Minus button. If you have added font files (e.g. .otf or .ttf files) you should also remove those from the Resource Library.

Additional questions?

If you have any additional questions not covered here, please visit the fonts knowledgebase article or ask us a question.

Related Knowledge Base Articles

See all articles...