Fonts to curves

(Fotis Kalafatis) #1

While not a big priority, I think a useful feature would be the ability to export fonts as curves. This would be rather helpful when developing with fonts that do not exist in the user’s system.


I use Illustrator for this. An added benefit is that after converting to vectors I can tweak things (such as taming Scriptina-based titles or creating other effects. The result can be saved as SVGs or dropped into Photoshop for additional effects.

(Fotis Kalafatis) #3

thank you @Furutan! As you point out, there are ways around it.
I am doing something similar to what you say: I design my assets in Affinity Designer (that also has the option to export fonts as curves in the SVG that it produces) and import them as SVG into Hype.

But since Hype already has a Type tool, it would be nice to allow the conversion of any text typed inside Hype - in the case that somebody decided to indeed use Hype’s Type tool.

Certainly it’s not a necessity at this point. It seems to me that the rectangle, ellipse and type tools are supportive and not meant to substitute a full-fledged vector illustrations program, so most people will probably be generating their assets elsewhere and be importing them into Hype.
But maybe one day Hype could become The one-stop-shop :wink:


It would take some serious work to get into vectors, plus it would be a challenge to handling them in such a way as to achieve the loading speed of Flash but without the totally BS way that Flash did it (as in ungrouping something and ending up with a bunch of fragmented strokes, etc.).

I’m just a Hype customer, but for my three cents, I’d place loading performance at the top - the ability to have total control over loading regardless of scenes, the ability to display content without waiting for off-screen content to load, the efficiency resulting from a shared resource folder for all Hype content (including consolidation of JS without all the repetitive code - run Google’s analysis tool and you’ll see this flagged).

The biggest problem from the marketing communications perspective is skyrocketing bounce rates. If a person has to wait for more than two seconds before they can get to it, they will jump away. (BTW, see the topic on compressing JPGs and PNGS. This is a big help.)

(Andrey Kolchin) #5

For the web focused animation we use basic fonts which the majority of users has. Version 3.5 has allowed to use web fonts. We use the same as on a site. Exotic fonts it is convertible in SVG in the graphic editor (in my case Graphics/iDraw).

(Fotis Kalafatis) #6

@burzum thanks for the tip! I didn’t know about web fonts in 3.5, but now that you told me I checked it and it’s awfully useful!

@Furutan I couldn’t agree with you more about consolidating JS files (and even more consolidating all the SVG assets into one package - maybe inline SVG?)


Unfortunately, Google recently decided to make “improvements” to their web fonts site. While they have added some useful features, they did something really idiotic by removing the list view and displaying fonts in large tiles (and all mixed together, and in mixed weights and with mixed wordings of text) which is great for leisurely browsing through flavors at Baskin Robbins but makes it a huge pain to get to things quickly unless you already know the name of the font.

I suggest that people go slowly through the entire collection of 200+ fonts and note down the ones they like, or they can download the fonts themselves, put them in a folder for future browsing.

A tip regarding web fonts: Download the actual fonts and don’t just grab the codes. If you want to use the fonts for both the web page and the animation, this will enable you to have an accurate display of the fonts on the page as you create it. Otherwise, the characteristics of the desired font will not match the default fonts when previewing the page in a browser.


What are the differences you’ve noticed?


It depends on the web app. Some beginner apps don’t handle the display of web fonts well. There can be slight differences in widths that can knock text blocks out of whack. Novices tend to be very literal and are not always good about leaving room for flexibility, particularly when running around images, etc.

(Jonathan Deutsch) #10

I recommend always using web fonts, either from an online repository (like Google Fonts or Monotype that are included), or via bringing the fonts in to the Resource Library.

It is of course true that even with this, fonts may render slightly differently from browser to browser.

(As a complete aside, I have done a little bit of experimentation in turning svg fonts into rendered paths to work with the physics engine, since I think it would be awesome to have physics elements interact with text shapes. There were a lot of issues I ran into though, so don’t hold your breath on this one!)


Check out Johathan’s presentation at the recent Hype conference (see the Tumult blog / news page) and his preview of Hype 4. When it is released, you can use Illustrator to convert the type, then output it as SVG. Hype 4 can then edit the vectors. (Way to go, dev team!)