[HTML5] My app is downloading WOFF+EOT+SVG fonts

Hi,
I noticed that my applications download the fonts in 3 formats WOFF, EOT and SVG: I thought that Openfl automatically identified the correct format for each browser, that is true for audio files, as Chrome downloads OGGs only.

Is this normal or am I doing something wrong?
Thanks

We ask the browser to load the font, and the CSS specifies paths to each type, the browser should optimize which one it loads – or its supposed to?

EDIT: Make sure your <assets /> tag is not including these files, otherwise we will list them as required assets, and we will force them to download as a part of your preloader. You can delete these files from your asset directory, current versions of OpenFL generate the intermediate webfonts in a different directory to avoid this problem

I have removed the converted fonts, keeping .TTFs only, but now when I compile it immediately tells me

Warning: Could not generate *.eot web font for "../_SharedAssets/Assets/Fonts/Helvetica_Condensed_Black.ttf"
Warning: Could not generate *.woff web font for "../_SharedAssets/Assets/Fonts/Helvetica_Condensed_Black.ttf"
Warning: Could not generate *.svg web font for "../_SharedAssets/Assets/Fonts/Helvetica_Condensed_Black.ttf"
Warning: Could not generate *.eot web font for "../_SharedAssets/Assets/Fonts/Myriad_Pro.ttf"
Warning: Could not generate *.woff web font for "../_SharedAssets/Assets/Fonts/Myriad_Pro.ttf"
Warning: Could not generate *.svg web font for "../_SharedAssets/Assets/Fonts/Myriad_Pro.ttf"

and so on for all the other fonts.

The JS loading starts but I (obviously) receive these errors

Failed to load resource: the server responded with a status of 404 (Not Found)
Helvetica_Condensed_Black.woff:1
Failed to load resource: the server responded with a status of 404 (Not Found)
Myriad_Pro.woff:1

Failed to decode downloaded font: http://localhost:2000/Assets/Fonts/Helvetica_Condensed_Black.ttf
(index):1
OTS parsing error: cmap: Failed to parse table
Log.hx:120 [lime.text.Font] WARNING: Could not load web font "Helvetica-CondensedBlack"
lime_utils_Log.warn @ Log.hx:120

Am I doing something wrong? In the BIN folder I have seen the Assets/Fonts folder containing the TTFs, and the OBJ/webfont folder containing… the same TTFs, when I expected to find the WOFF, EOT and SVGs files.

:thinking:

Hmm, I wonder why it cannot do the conversion on these fonts. The webfont doesn’t work for all fonts, but seems to work for most.

Current OpenFL versions should have an HTML template that does not reference font types (WOFF, SVG, etc) that failed conversion, so it will not result in an error at runtime, at worst, it should result in not rendering the font

So, what can I try now?

If your HTML template is up-to-date, it should avoid runtime errors. Most (all?) browsers support TTF directly, though these other formats can be preferred

Hi, we had similar problems.

There is currently no way to specify to “not generate” fonts from specific font files and just copy them, no?

In our case we have to use existing web-fonts. And I thought it would be wise to add these just into the font asset directory, because I thought “maybe, if they existed already, openfl does only copy them”. Now we found out, that this was not the case; they were generated anew based on the ttf one. But this font conversion had in this case bad results (strange pixel errors in Firefox). We made sure, that it was the font generator, since with the original web-fonts the result was good. So, for now as workaround I just try to overwrite the generated web font files in the binary folder with the wanted original ones.

But if there was a way to use specific existing font files without auto-generation then this would solve our both problems, I think.

Thanks

We don’t have a way of specifying fonts in a project.xml to be included right now (and not processed), it’s part of the complexity of no 1:1 relationship, and needing the font name.

You could handle it by using <asset path="to/pre-generated/fonts" embed="false" if="html5" /> and then overriding the template index.html for your project, with hard-coded CSS in it for your font. Your font won’t be included in the OpenFL preloader, but will be loaded by the page, and available once ready

Are there plans to fix these problems?

Thx for your suggestion. But I fear, in our current state this way would cause too much adjustments.

We need the fonts also being registered in Assets.hx. So, when not embedding, then loading at runtime. But then again, dynamically loading fonts would cause a bit of trouble also, because we have to specify them (in code) and then I had to choose the font to be loaded depending on which browser the application is running in, which is actually the browser’s job itself. Or does openfl.utils.Assets.loadFont also work with the font-family from CSS?
Another thing we had to do is to hide the preloader bar text until at least its required font was loaded.

All in all, it is easier for us to just copy the desired web-fonts after the build process. It does the trick and requires no further in-code adjustments on our side.

But, to be honest, I would prefer to have this definable somehow in the project.xml, maybe via the attribute generate=“false”.