Font embedding HTML5 CSS bug ( workaround )

Help
#1

Font embedding for html5 finally worked for me, after reading a lot of threads :}

I’m sharing a workaround I found in the case your font work on desktop but fails on iOS : It seems that openfl(?) produces a buggy css. Safari OSX doesn’t mind it. But your loader will get stuck on iOS.

The faulty CSS looks like :

html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; } #openfl-content { background: #000000; width: 100%; height: 100%; } @font-face { font-family: 'null'; src: url('fonts/RopaSans-Regular.eot'); src: url('fonts/RopaSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/RopaSans-Regular.svg#my-font-family') format('svg'), url('fonts/RopaSans-Regular.woff') format('woff'), url('fonts/RopaSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'null'; src: url('fonts/RopaSans-Regular.eot'); src: url('fonts/RopaSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/RopaSans-Regular.svg#my-font-family') format('svg'), url('fonts/RopaSans-Regular.woff') format('woff'), url('fonts/RopaSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ropa Sans'; src: url('fonts/RopaSans-Regular.eot'); src: url('fonts/RopaSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/RopaSans-Regular.svg#my-font-family') format('svg'), url('fonts/RopaSans-Regular.woff') format('woff'), url('fonts/RopaSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ropa Sans'; src: url('fonts/RopaSans-Regular.eot'); src: url('fonts/RopaSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/RopaSans-Regular.svg#my-font-family') format('svg'), url('fonts/RopaSans-Regular.woff') format('woff'), url('fonts/RopaSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

( that’s a lot of font-faces, for just a single font to embed!.. )

I just have to remove all the nodes except one with a correct font-family: ‘Ropa Sans’

The bummer is i have to do use an index.html template now to automate the workaround…

#2

Does it happens on clean build? (openfl clean html5)

#3

Also, after investigating on the bug, i found Font.enumerateFonts gives the following result :

       { 
	src : null, 
	name : null
},{
	src : null, 
	name : null
},{
	src : null, 
	name : Ropa Sans
},{
	src : null, 
	name : Ropa Sans
},{
	__fontPath : null
}]

Wich makes total sense when we look at the corresponding CSS.

How does the Font register gets to that point after :

Assets.getFont(“fonts/RopaSans-Regular.ttf”);

Is beyond me

#4

openfl clean html5 didn’t create a build for some reason, so i tried : openfl build html5 -clean , which worked

I still get trash font-faces in the CSS

#5

Does this happen in the “AddingText” or “PiratePig” sample? perhaps this is a problem if the font is embedded multiple times in project.xml

#6

It isn’t meant to create a build; it just clears the old build files. Once you run clean, the next build you do is automatically a clean build.

1 Like
#7

Oh ok i get it ( clean command )

#8

Nope, AddingText doesn’t have the faulty CSS. It still hangs on preload though.