Tumult Hype Forums

Welcome, Guest Login

Support Center

Web Fonts - Google Web Fonts, Typekit, Cufón, and Icon-based fonts (Font Awesome & Bootstrap)

Last Updated: Jan 22, 2014 02:59PM PST

Tumult Hype 2 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 more information please see the Fonts chapter of Hype's documentation.   

Typekit

To embed a Typekit font in Tumult Hype, click Add Fonts, select 'Custom' and insert your Typekit code in the provided box:

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

In that same box, define the 'font-family'. 

Font Awesome, or icon-based fonts

Add Font Awesome to your document by using the CDN version of Font Awesome. The current version is 4.0.3. Click ‘Add Font’ and paste this code:

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
     /* Make sure that 'i' class="fa" elements are not actually italic */
    .HYPE_scene i.fa {
     font-style: normal !important;
    }
</style>



Next, 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> . 

With the element still selected, select ‘Font Awesome’ in the Font Family chooser. The document included in the footer of this document shows this font in action.

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

Cufón, FontSquirrel and typeface.js: Using fonts from your Computer

For power users, FontSquirrel creates a @font-face-friendly output from a font on your computer. You would need to embed the relative or absolute URL to the fonts you generate in your Hype document by editing the Inner HTML of an element.  

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.  

 

Contact Us

support@tumult.com
http://assets2.desk.com/
false
hypeapp
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete