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:
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)
