[HTML5] IOS10 fonts problem

Romiar · June 22, 2017, 9:35am

Hi guys.

I’m doing a game with openfl and html5 export.
I have a problem with fonts and IOS10.

The application doesn’t recognize the font and appears “?”.
I don’t know why, but if i switch from landscape to portrait and again from portrait to landscape, the font is recognize and work.
Theese textfields are in a swf, but i have the same issue with a textfield created and added from code.
can you help me?

Openfl 5.0.0
Lime 4.1.0

Thanks a lot.

singmajesty · June 22, 2017, 4:38pm

Have you included a copy of the same font in your assets? For example, if the SWF uses a font called “Arial Bold”, you should include ArialBold.ttf in your assets, and if the name of the font matches, it should use this font for iOS, HTML5 and other targets

Romiar · June 23, 2017, 7:02am

Hi.

Yes. the font is also included in the project.
I’m checking on google, and i see that this problem occur also with phaser or others.
Really, i don’t know how to solve this problem.
However, the application is HTML5 and i have the problem with IOS10

Romiar · June 23, 2017, 8:41am

If can be help, i have the font loaded in the tag of my html file like this:

@font-face {
font-family: ‘Lato Regular’;
src: url(‘fonts/lato-regular-webfont.eot’);
src: url(‘fonts/lato-regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/lato-regular-webfont.svg#my-font-family’) format(‘svg’),
url(‘fonts/lato-regular-webfont.woff’) format(‘woff’),
url(‘fonts/lato-regular-webfont.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

In the SWF i have font family Lato and style Regular( TextField options on fla when you create and add it ).

singmajesty · June 23, 2017, 6:53pm

Does it work if you remove the user agent check in this code?

github.com

openfl/lime/blob/develop/lime/text/Font.hx#L493


				promise.complete (this);
				
			});
			
		} else {
			
			var node1 = __measureFontNode ("'" + name + "', sans-serif");
			var node2 = __measureFontNode ("'" + name + "', serif");
			
			var width1 = node1.offsetWidth;
			var width2 = node2.offsetWidth;
			
			var interval = -1;
			var timeout = 3000;
			var intervalLength = 50;
			var intervalCount = 0;
			var loaded, timeExpired;
			
			var checkFont = function () {
				
				intervalCount++;

so Safari uses fonts.load to ensure that the font is loaded before we exit the preloader and begin your game?

singmajesty · June 23, 2017, 6:53pm

Do you get any runtime warnings about “Cannot find SWF font name …”

Romiar · June 26, 2017, 7:53am

Hi joshua.

Unfortunately, your fix doesn’t work.
I haven’t “Cannot find SWF font name …” error.
However, maybe, and i repeat, maybe, it’s a problem of the font. because i have changed the font from “Lato Regular” to “Lato Bold” and the problem is solved.
I have read that this is a problem of IOS 10+, because some users had this problem also with spotify or athers application.
As i say years ago, apple must be annihilated.