Hey! Forgive me if this has been asked before, I looked around but couldn’t find my exact issue.
I have a font I’m using called Vanilla Extract for a game I’m making and it works when I run it, but it doesn’t work when other people run it on their computers–the font just defaults to whatever the system default is.
I’m not sure what the problem is – I’ve tried using embedFonts=true, and that had no affect. Any ideas? @singmajesty
Do you include it in your assets when you build your project?
As in do I include it in the project.xml? I do, yeah. Not the explicit fonts folder, but the folder above it.
Do you see the TTF in your Export directory? Do you include it when you share it to other users?
Yes, the font is in the Export directory, and all the assets are on the server so that font should be included?
Oh, is this HTML5? Can you check the generated HTML, to see the styles for your webfont, and see what name it is under. Does it match the name you are using in your project code? There’s also the chance in HTML5 that our font preloading code is not triggering properly, and you may be rendering text before the browser has loaded your webfont in
oh hm…i dont see my font mentioned at all in this html…and the font folder isnt included in the assets when i actually go to sources on the chrome debugger…
Try the “AddingText” sample, and compare how it works:
openfl create AddingText
cd AddingText
openfl test html5
It should have a custom font included, which should show up as a webfont.
Did you get any warnings that the webfont generator couldn’t generate the WOFF, SVG or other webfont files from your font file?
I don’t get any warnings, and in fact the lime preloader definitely DOES load the font…
[lime.utils.AssetLibrary] Loaded asset: item-assets/runlikemath/fonts/TypoGroteskRounded.eot [BINARY] (21/80)
run_like_math.js?versionId=Gnpf3babmLreVpYNLFr1279A5N0iA7SW:177067 [lime.utils.AssetLibrary] Loaded asset: item-assets/runlikemath/fonts/TypoGroteskRounded.woff [BINARY] (22/80)
run_like_math.js?versionId=Gnpf3babmLreVpYNLFr1279A5N0iA7SW:177067 [lime.utils.AssetLibrary] Loaded asset: item-assets/runlikemath/fonts/VanillaExtractRegular.eot [BINARY] (23/80)
run_like_math.js?versionId=Gnpf3babmLreVpYNLFr1279A5N0iA7SW:177067 [lime.utils.AssetLibrary] Loaded asset: item-assets/runlikemath/fonts/VanillaExtractRegular.svg [TEXT] (24/80)
run_like_math.js?versionId=Gnpf3babmLreVpYNLFr1279A5N0iA7SW:177067 [lime.utils.AssetLibrary] Loaded asset: item-assets/runlikemath/formulas.as [TEXT] (25/80)
run_like_math.js?versionId=Gnpf3babmLreVpYNLFr1279A5N0iA7SW:177067 [lime.utils.AssetLibrary] Loaded asset: item-assets/runlikemath/fonts/VanillaExtractRegular.woff [BINARY] (26/80)
…but nothing in your HTML file? The template copies based on assets with the type “font”:
https://github.com/openfl/openfl/blob/develop/templates/html5/template/index.html#L30
It should assign that by default, but if you have a type attribute in your XML, it’s possible it’s being treated as a different asset type. Does AddingText work for you? Does it work if you paste in your fonts in the asset directory, and use your font name instead?
Hey, sorry, after some investigating it appears to be an issue with how we handle builds internally. Sorry for the confusion!
I had an issue with fonts in HTML5 as well. I tried different things without succes. I think it needs time to load the font. As a workaround, I keep the TextField invisible for 25 frames or so, while change the text each frame. When I display the TextField after that, the font has loaded and it displays correctly. For me, that was an option.
What font/browser?
Ideally, we want to improve the font preloading code, so that the preloader does not exit until after we are sure our fonts are loaded
I use Safari and Chrome on a MacBook. I have OS X El Capitan 4.5.1, Safari 10.1.1 and Chrome 58.0.3029.110 (64-bit). I use openFL 4.5.1, which is great, btw, thanks a lot!
I tried several things: I compiled the AddingText example, which has the same behaviour. My workaround is to update the text for a while, after which the right font appears. Both waiting and updating the text in a for loop after it’s created didn’t work: I need to update the text in the ENTER_FRAME event for a second or so.
I’m using the SoupOfJustice font. It generated the eot, svg, ttf.hash and woff files.
This is the code I’m using:
package gfx;
import openfl.text.TextFormat;
import openfl.display.Sprite;
import openfl.text.TextField;
import openfl.text.TextFormatAlign;
import openfl.text.TextFieldAutoSize;
import openfl.Assets;
import openfl.text.Font;
import openfl.text.TextFieldAutoSize;
//#if js
//@:font("Assets/fonts/soupofjustice.ttf") class DefaultFont extends Font {}
//#end
class ScoreBoard extends Sprite {
private static var _instance:ScoreBoard = null;
public static function instance():ScoreBoard {
if (_instance == null) {
_instance = new ScoreBoard();
}
return _instance;
}
private var txt:TextField = null;
private var score:Int = 0;
//#if js
// private var count:Int = 0;
//#end
//----------------------------------------------------------------------------------------------------------------
// new()
//----------------------------------------------------------------------------------------------------------------
public function new() {
super();
/*#if js
Font.registerFont(DefaultFont);
#end*/
// var textFormat = new TextFormat(Fonts.SOUP_OF_JUSTICE, 50);
txt = new TextField();
txt.embedFonts = true;
txt.selectable = false;
// var font = Assets.getFont ("assets/fonts/soupofjustice.ttf");
// var textFormat = new TextFormat (font.fontName, 50, 0xFFFF00);
//#if android
// var textFormat = new TextFormat ("soupofjustice.ttf", 50, 0xFFFF00);
//#else
var textFormat = new TextFormat ("Soup of Justice", 50, 0xFFFF00);
//#end
txt.autoSize = TextFieldAutoSize.LEFT;
txt.defaultTextFormat = textFormat;
txt.setTextFormat(textFormat);
txt.x = 48;
txt.y = 48;
addChild(txt);
// addScore(10);
//#if js
// addEventListener(Event.ENTER_FRAME, update);
// txt.visible = false;
//#else
addScore(0);
//#end
}
/*#if js
function update(e:Event) {
count ++;
if (count < 15) {
txt.text += "1234";
} else {
removeEventListener(Event.ENTER_FRAME, update);
addScore(0);
txt.visible = true;
}
}
#end*/
//----------------------------------------------------------------------------------------------------------------
// updateScore()
//----------------------------------------------------------------------------------------------------------------
public function addScore(value:Int) {
score += value;
if (txt != null) {
txt.text = "Score:" + score;
}
}
}
And this is the xml file:
<?xml version="1.0" encoding="utf-8"?>
<project>
<meta title="TileTest" package="org.openfl.samples.displayingabitmap" version="1.0.0" company="OpenFL" />
<app main="Main" path="Export" file="DisplayingABitmap" />
<window width="1280" height="720" />
<window width="0" height="0" orientation="landscape" if="android" />
<window fullscreen="false" vsync="true" if="mac" />
<window background="#80E0FF" fps="60"/>
<template path="libs/AndroidManifest.xml" rename="app/src/main/AndroidManifest.xml" />
<set name="haxe-trace" />
<haxelib name="openfl" />
<source path="Source" />
<assets path="Assets" rename="assets" />
<assets path="Assets/fonts" rename="fonts" if="html5" />
</project>
When I tried updating openFL, at some point I got a message that one of the libraries was not compatible. It updated a lot of stuff, after which I couldn’t build for Android anymore. I can’t remember which error I got. I think either NME or Lime needed a certain version of haXe or openFL needed a certain version of NME or Lime, I can’t remember exactly.
In the meanwhile, I was able to update openFL, thanks to the help on this thread. I have removed the fix and the fonts seem to load well.