Quickly embedding custom fonts in your Hype document using Font Squirrel

Of course, if you’re just starting wrapping your head around fonts in Tumult Hype, start here. Keep reading if you have a font file (which you have rights to use on the web) and you need to use it offline, don’t have access to it via Typekit or Google Fonts, and just wanna use it in your Hype document:

First, upload your .ttf font to FontSquirel’s generator:

This will generate a package of font files you can use with broad browser support. The file structure of what is generated is:

02 AM

If you open up the stylesheet.css file, you’ll see the following code:

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 7, 2018 */

@font-face {
    font-family: 'audiowideregular';
    src: url('audiowide-regular-webfont.woff2') format('woff2'),
         url('audiowide-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

To use this font package in Hype, drag the font files used in this CSS file (the .woff and .woff2 files) into your resources library.

Next, add a new custom font in the Typography inspector:

Finally, insert the following in your font style:

<style>
   @font-face {
    font-family: 'audiowideregular';
    src: url('${resourcesFolderName}/audiowide-regular-webfont.woff2') format('woff2'),
         url('${resourcesFolderName}/audiowide-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
</style>

Make sure the CSS Font-Family value matches the font family field name within the <style> section.

Make sure you:

  • Include the ${resourcesFolderName} variable ensures that the font file being loaded includes the correct resource library reference during export.
  • Sandwich your font CSS code within <style>...</style> tags
  • Need to reference font-weights? Set them in the CSS using an important declaration like: font-weight: 200 !important; (replace 200 with the weight you wish to use).

Here’s the demo file for this font: font-test.hype.zip (65.9 KB)

6 Likes

very helpful guide thanks.

Typical of course, but I missed the need to add in ${resourcesFolderName} so then I had to add the font again. I couldn’t find a way to edit the font I’d added erroneously, nor can I now seem to delete the wrong entry from Head HTML.

Is there a way to do that?

Resources Panel->->

Look for the recently created font (green background with white T) and then click it and you will see “Edit Font…” at bottom.

To delete just delete the resource. This will remove from the head HTML

2 Likes

bingo!

Cheers.