Loading Custom Fonts in Hype
I first discovered Hype while working on a project at UVU. I had no idea what I was doing and didn’t think I’d ever use it again. Yet here we are. This article is to help ease the process of learning how to use Hype.
The video above is the result. I’m more of an after effects kind of girl but there are some cool features Hype has, including adding custom fonts.
First you need to make sure your fonts are web fonts, with the extensions WOFF or WOFF2.
If your font does not have either of those extensions, you can use an online service to generate them for you. When you generate the font, you should get a “font kit”. Once you download it, open the stylesheet.css file in a text editor or visual studio.
In Hype, open the Typography tab and click Add More Fonts > Custom CSS. This modal should pop up.
Copy and Paste the text from the stylesheet.css file into the “Embedded Head HTML” text box, along with the Display name and CSS Font-Family name, found in the stylesheet file.
Place the .svg, .tff, .eot, .woff, AND THE HYPE FILE in the same folder to ensure it works properly
In the resources tab, down at the bottom left, there is a plus button. Click it, select all the font files, and click open.
Once you’ve done that, you can now select the font from the dropdown and start typing with your custom font!
Chelsa MacKay Anderton is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The previous article relates to Using Hype in the DGM 2280 Course and is representative of the skills learned.
