From categories:
Michael O'Brien (guest) 20 Apr 2018 04:29
in discussion Hidden / Per page discussions » Embedding Fonts in Haxe OpenFL

Hi Tim,

Following up on this after a long break. For JS HTML5 target.


Has a working example which does appear to really work in the situations I tested it on:

Google Chrome
Internet Explorer


The only problem I ran into, at this stage, was that the font was moved down in the textField on the iPad.
Annoying when using textFields in association with graphics.

This appears to cause the bottom few pixels to be cut off if using TextFieldAutoSize.CENTER etc.

I added a couple of other fonts and they worked as well.

html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
#openfl-content { background: #000000; width: 100%; height: 100%; }
@font-face {
font-family: 'Liberation Serif';
src: url('assets/LiberationSerif-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;



var font = Assets.getFont("assets/LiberationSerif-Regular.ttf");

Also found out that you can't the place the fonts in a font directory if you use a hppts web site, works for http. Hppts have to put the fonts in with the js file.

Cheers Michael

by Michael O'Brien (guest), 20 Apr 2018 04:29
Waste of time (guest) 30 Aug 2017 21:10
in discussion Hidden / Per page discussions » Embedding Fonts in Haxe OpenFL

Doesn't work

by Waste of time (guest), 30 Aug 2017 21:10

Hello Michael! I tried a number of things to see why it wasn't loading on Safari or IE, but I haven't been able to pinpoint exactly what's up yet. There are likely better ways to do font embedding for HTML5 targets (likely using the CSS font-face feature), though as of yet I am unsure how to fully capitalize on this. Like you, I'm also getting accustomed to the OpenFL environment!

Timothy Foster - @tfAuroratide - Go here if you're nerdy like me

by Timothy FosterTimothy Foster, 16 Sep 2015 13:07
Michael (guest) 09 Sep 2015 07:48
in discussion Hidden / Per page discussions » Embedding Fonts in Haxe OpenFL


Thanks for the great post!

I'll moving from Flash AS3 programming over to OpenFL and this was a great help, however I ran into a problem when I tried to embedding the Arial.ttf font in HTML5/js … it works great on Firefox and Google Chrome, unfortunately it did not work on Safari (Mac or iPad) or Internet Explorer. It fails to finish loading on the last two.

Project.xml line:
<assets path="assets/fonts" rename="fonts" if="html5" />
Appears to be the problem. Rem it and works fine, not Arial font just the default of course.
read … as newbyte dot com as I am not allowed to post links on this site.

Working with line remed

Line active

Any help would be greatly appreciated.

Please keep up the excellent work.

Cheers Michael

by Michael (guest), 09 Sep 2015 07:48