Adding fonts without CSS

Right after opening Hype for the first time, I noticed my fonts aren't there.

I looked it up in the docs and there this involved process of adding a CSS definition or something like that in order to use a font. I don't think I remember reading even where was the font file gotten from.

I'm not using hype to build a web site, I'm trying to create an animation to export it into a video. From what I gather, I need to create a web site, or at least an HTTP file server to host the file, even if it is local, so Hype pulls them not before first finding this CSS code I know nothing about. Is that correct?

If it is, It's kind of a lot. Is there any other way?


The font isn't in Google fonts, BTW. I made— I'm making it.

But even if were AND I were building a website, I wouldn't feel right pulling stuff from other domains/CDNs because that's not what a visitor types in the address bar. It's a breach of trust, I think. At the very least it would make uBlock Origin flag the site.

Hi Vita,

Since it's your font and it's already on your computer, it will still require a snippet of CSS to use it within your project, but it's not too tricky. You may have set the 'Family Name' already in your Font creation program, but you can find it here in Font Book:

Once you have that, you can drop the file into your Hype resource folder, and use this format to load it in Hype:

@font-face {
    font-family: 'Your Family Name';
    src: url('${resourcesFolderName}/fontfile.woff') format('woff');

The 'family name' doesn't really matter if you explicitly are setting a 'src', just make sure it doesn't conflict with something else.

You can use Hype to create videos without ever connecting to the internet -- the video generation process happens on your machine without connecting to a server. The process of loading your font + creating video frames with it can all happen offline.