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!
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.
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
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
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.
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.