Typekit Font not Exporting in GIF, PNG, or MP4

[dejoha (Derek Hansen)]

I am using Hype Pro 3.5.1 and successfully imported a font from TypeKit. It looks great in the design, but when I try exporting as either an animated GIF, PNG sequence, or MP4 movie, the font is substituted with Times Roman. Is there a solution or workaround I’m missing?

[Daniel]

This may help:

Showing Typekit fonts when previewing locally or on Hype Reflect

To test your Typekit fonts when previewing either on your computer (locally) or in Hype Reflect (over your WIFI network), you’ll need to first ask permission from Typekit by adjusting the Kit Settings. First, look in the Sharing settings on your mac and copy your shared computer name: [image] With the above computer name, you would insert the following in Typekit’s Kit Settings: retinaimac.local, localhost When previewing in Hype Reflect, the URL looks something like this: retinamac.loca…

[dejoha (Derek Hansen)]

Thanks. The preview looks correct in my browser on my local machine, but I’m still not able to export a GIF, which is what I need.

[Daniel]

That's strange.

Can you try one of these capture tools?

Improving GIF Rendering with the Command line, Apps & more

We use Apple's built in GIF creation library, and unfortunately it skips some colors (for no good reason) and does not look as crisp as it should. Some animations export perfectly, while others have blurry text or are missing many colors. If your GIF export never finishes, and your GIF duration is under 30 seconds, please follow these instructions to switch to the older GIF export engine. Top recommendation: Gifski This tool lets you drop in a video and it outputs a high quality GIF: https:/…

[matts (Matt)]

I’m having this problem as well, with Hype 3.2.1 (526) Pro and some rather complex, type-centric animations. I’ve liberally added localhost, 127.0.0.1, and my [machine-name].local domain to Typekit’s kit domains, and yet still I get the serif fallback when attempting to render a video, GIF, or PNG sequence. In-browser previews work great, however.

Is there a hacky way to tell the renderer to sub in local fonts, or any way at all to get around this? It seems like it doesn’t honor Typekit imports or is simply working from a domain I’ve yet to identify.

[jonathan (Jonathan Deutsch)]

This is a known issue; the problem is that the GIF/Video is animating from a file URL and not via a localhost/127.0.0.1 domain where the fonts would show up. I’d like to fix this in a future release.

You could theoretically download the fonts so they are local. You can either add them to your system or import into the Hype document itself and setup custom CSS. You can see the docs here:

http://tumult.com/hype/documentation/3.0/#declaring-an-font-face-style

http://forums.tumult.com/t/access-to-system-fonts/902/5?source_topic_id=6650

[matts (Matt)]

Thanks for clarifying, @jonathan. I don’t have access to view that second (forum) link, but this makes sense.

Is there an easy way to update every utilized instance of a font? I assume I could establish a new linked local font within the Hype UI and then edit *.hype/data.plist to change references like this…

<dict>
	<key>identifier</key>
	<string>FontFamily</string>
	<key>objectValue</key>
	<string>my-typekit-font-name</string>
</dict>

…so that my-typekit-font-name becomes my new local one. Assuming that’d work, is that the only way to avoid loads of point-and-click action?

[jonathan (Jonathan Deutsch)]

Unfortunately there’s not an easy way to update a font; this is a long-standing request I’d like to tackle.
Plist hacking is about the only way to do it now, but totally unsupported . The only official workaround is to delete the the font and create a new one.

[matts (Matt)]

I’m going to take that as “sure, hack at the plist if it seems to work and saves you lots of time, just don’t come back here whining about it if you’re already being cavalier after I warned you.”

And I can live with that.

[jonathan (Jonathan Deutsch)]

Exactly .