TTF to WOFF conversion

Hi,
working on my project I noticed that the browser wasn’t able to find a .WOFF resource, corresponding to the .TTF font I was trying to retrieve from AssetsManager. What is this?
The answer is simple: well, WOFF format is the Web Open Font Format, and when loading your project from a web server you need it instead of TTF. The “problem” is that when targeting HTML5 the compiler doesn’t make any kind of format convertion, so you have to provide i.e. both MP3 and OGG formats, and this is true for fonts too, you have to put TTF+WOFF.
To get the WOFF format (if you don’t find it in your favourite font asset) you can use a converter, I have just tested this one: UPLOAD -> CONVERT -> DOWNLOAD -> DONE!

Hope this can help.

1 Like

I tested(Lime 2.3.3 OpenFl 3.0.3) it right now and I can note that inside of my source folder with fonts after compilation not only TTF files, but also WOFF, EOT and SVG.

This is strange, I have checked the assets folder I copied in the server and there is TTF only, while in the local one there are the four formats, TTF, SVG, WOFF and EOT. I wonder what happened, as I copied the assets folder all at once.

Yes, you’re right, the conversion is done automatically, I missed it, now I have to understand why the folder in the server contains TTF only, but I think it is something with Filezilla or the receiving server.

Thank you T1mL3arn!

It might also be the converter – sometimes it fails on certain fonts, but it is helpful as we really need ALL those file formats in order to cover all browsers :slight_smile:

And how is need to handle so many formats in the code like this?

Assets.getFont('my_font.ttf');

Assets.getFont ("my_font.ttf"); would map to an object with the font name (like “My Font”), then in the HTML5 generated output file, it will do the web font embed for “My Font” with all formats

I noticed in the html5 build it will preload all font formats (svg, eot, woff). Chrome for instance only needs woff.

This slows load times down a bit, not sure if it affects memory foot print. Investigating.

Are you using FlashDevelop/HaxeDevelop? I noticed that building it inside the IDE (F8) won’t generate the fonts, while building it from the terminal w/ verbose output (openfl build html5 --verbose) will.

OpenFL generate all font formats, and put it info @font-face css rule. Than browser will load only one appropriate format.

Is that true only for the DOM version or canvas as well? I think its our asset tag causing it preload all font formats. I resolved the issue by using an ‘if’ argument on the asset tag. According to ‘can i use’ woff is supported by all major browsers so I’m just loading that one http://caniuse.com/#feat=woff

This is true for canvas and for webgl modes as well. Actually html preloaded didn’t load fonts at all, instead of it, preloader waits when font will be available in browser. You can look into generated .js to verify this.

Thanks @restorer we must be doing something wrong. When I watch the network traffic all font formats load.

Oh, sorry. Totally forgot about one tricky thing :scream:

OpenFL html5 preloader didn’t load only .ttf, but it will load other file formats (including .eot, .svg, and .woff).

Correct line to embed fonts both for native and html5:

<assets path="assets/font" exclude="*.eot|*.svg|*.woff" rename="font" />

Build system for html5 will still export all font formats, but this time they will correctly handled by preloader.

2 Likes