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 or use https://transfonter.org/ if you have an OTF font:

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:

   @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;


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)


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





I have a custom English / Arabic font. I followed the guide and the font is embedded, when I enter English characters the text is using the custom font however when I enter Arabic characters some default font is used.

How can I enable the Arabic font as well?

below steps solved my issue
Solution :

1- goto >>> http://www.fontsquirrel.com/fontface/generator

2- upload your font on expert mode

3- check only those values :
--------> Font Formats: woff
--------> Truetype Hinting: Font Squirrel
--------> X-height Matching: none
--------> Subsetting: No Subsetting

Solution by Abde’llah Gym from Using @font-face CSS stylewith an Arabic font?


I see that you uploaded only the WOFF/WOFF2 formats.
I just made a test by embedding only the WOFF2 format and it seems to work across the board on Mac.

Is there a good reason to only embed the WOFF2 format?
Why embedding both WOFF and WOFF2?
Is there an issue with Microsoft Edge?

Thank you.


Thank you for the nice resource but sometimes I prefer to ask people with experience because I have already read all and the contrary about the font formats, especially about compatibility.

I bookmark the link.

I have a recollection that @Daniel and I were discussing this recently; I don't remember what we were reading but this SO answer seems to be a pretty good overview as to what to use in 2021:


I had to get some .otf fonts into Hype, but Font Squirrel can't deal with them. I found a better tool:

This worked perfectly. Following the rest of the instructions in this post did the job.



I have a font - Hanson Bold 700.otf - I have done the steps as in the description but on the preview or final version it is not ok. (this is the hype file - Custom Font.zip (57.5 KB)
and the font - Hanson Bold 700.otf.zip (24.2 KB))

Can you help me understand what am I doing wrong?
Thank you!

It looks like you're not referencing the font files from your resources library. Instead of using:

url('hanson_bold_700-webfont.woff') format('woff');

You should use:

url('${resourcesFolderName}/hanson_bold_700-webfont.woff') format('woff');

This grabs the font file from your resource library. (Make sure you update both the woff and woff2.

1 Like

Thank you so much @Daniel !

1 Like

Hello @Daniel, unfortunately, I have an issue with the export and the Sources view. Although I did it like you described I cannot see the files in the Sources folder - if I check the Hype file through View Package in Finder I can see the font files there. If I export the assets the font files are not included. I transformed it in https://transfonter.org/. Do you have any idea how to fix it?
Bildschirm­foto 2022-09-19 um 18.55.14

Did you drag your font files (woff, ttf, etc) into the Hype resources library? Happy to take a look if you can share a simplified document.

Yes, I did it. And as I already wrote yesterday I can find them in the Hype file if I check its content via Finder. If I try to add them to the sources folder in Hype the software tells me that they are already there. I will send you the file privately because it contains sensitive data.

1 Like

This was an easy tutorial... Thanks!

1 Like

Hi, is it possible to add several font at the same time (for example, the italic + regular of the same font) or do we have to put de the font one by one ? Thanks for your answer

To use through the Hype UI properly, you need to add one at a time.

(We'd like to make this process easier -- for example, it'd be nice to just be able to drag font files to the resources library and have everything setup)

1 Like