Yes I'm using C2 runtime for retro compatibility with IE11 and Edge + WebGL1.

I agree that this should not happen (font-face not rendering properly), but it is sadly a 100% repro step for us for the last 3-4 years.

Construct is not the problem here, it is really a browser font loading VS synchronisation timing problem.

Thanks!

Microsoft Internet Explorer 11 and Edge browser do not render local font files FACE on text objects on start of layout, displaying fallback font like Time New Roman instead.

By local font files, I mean downloaded Google fonts, like: Exo, Krub, worksans in 3 formats (ttf,woff,woff2)

It is a known issue also occurring on standard HTML5 tags and CSS, not just in canvas.

(YES bad browsers)

Working & tested solution that I wish to share:

• Once all text treatments are done (if any): Ajax local translation file loaded and text updated
• Or On Start of Layout
• Create a Family with all text object from your game. Call a function that loop all objects and change the size property
• This will force re rendering of the text objects with the right font-face

hi Ashley.

To follow up on this topic, I've tried many solutions,

but the bidirectional RTL support is really needed for the text label object.

Has a company, we need to support Arabic language in most of our games.

Thanks!

Ok! I have found a solution using HTML Textarea and CSS stylesheet instead of Canvas text element.

First step: Create a styles.css stylesheet in the "Files" folder of your project with the following styles:

(examples)

(For now the direction:rtl is set to all, as a test)

	textarea
{
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none;
	color: white;
	user-select: none;
	font-weight: 900;
	background-color: transparent;
	border: 0;
	font-family: 'OpenSans-ExtraBold';
	text-shadow: -1px -1px 2px #000000, 1px 1px 2px #000000;
	overflow: hidden;
	direction: rtl;
	
}
textarea:focus { 
	outline: none; 
	cursor: default;
}

	"
var nameScript = 'styles.css';

//C2 Runtime
if (typeof this.runtime !== 'undefined'){
	nameScript = this.runtime.getProjectFileUrl(nameScript);
}
//C3 Runtime
if (typeof this._runtime !== 'undefined'){
	nameScript = this._runtime.GetAssetManager().GetProjectFileUrl(nameScript);
}

var ss = document.createElement('link');
ss.type = 'text/css';
ss.rel = 'stylesheet';
ss.href = nameScript;
document.getElementsByTagName('head')[0].appendChild(ss);
"

Any hint on this Ashley?

Has it is described in W3C documentation and supported in HTML css definition with "direction:rtl"

w3.org/International/questions/qa-html-dir

We need support in construct 3 text object for Arabic Right to left bidirectional direction.

What is the way to integrate it on a text object or all text elements?

I know that setting "dir='rtl'" on a canvas should do the trick, but since construct generate the canvas dynamicly, i'm not sure how to do it!

Thanks

If your are looking for a C2 & C3 runtime compatibility:

"var nameScript = 'external.js';
//C2 Runtime
if (typeof this.runtime !== 'undefined'){
	nameScript = this.runtime.getProjectFileUrl(nameScript);
}
//C3 Runtime
if (typeof this._runtime !== 'undefined'){
	nameScript = this._runtime.GetAssetManager().GetProjectFileUrl(nameScript);
}
var jsFile= document.createElement('script');
jsFile.src = nameScript;
document.head.appendChild(jsFile);"

-> leaderboard_Image: Load image from str(InstantGames.LeaderboardPlayerPhotoURLAt(LoopIndex)) (Keep current size, cross-origin anonymous)

'LoopIndex' is the index value of the current loop iteration

Here is some other item you can get from InstantGames Leaderboard:

-> sf_leaderboard_userRank: Set text to InstantGames.LeaderboardRankAt(LoopIndex)

-> sf_leaderboard_userName: Set text to uppercase (InstantGames.LeaderboardPlayerNameAt(LoopIndex))

-> sf_leaderboard_userScore: Set text to InstantGames.LeaderboardScoreAt(LoopIndex)

Here is an example of integration that allows the use of any javascript within the Construct context:

1. The 'external.js' file is the 'file' folder of the Construct 3 project
2. On start of layout we valid that the JS file has not been loaded by verifying the value of our specific boolean variable. I used "ValerypopoffJS" addons to be able to add JS comparison condition
3. The 'external.js' file is added to the header of the index.html document. Note that we used "this.runtime.getProjectFileUrl(nameScript)" to get the real URL context
4. Then on touch of a button or other event we call call the external JS function with the Browser execute Javascript
5. The callback is set within the function as the 'return' would normally "c2_callFunction("CallBackRandomString", [text]);". It triggers the corresponding 'On' function defined in construct

The Business Review can be complicated and take many days as you must send real paper proof by mail (receipt, bill, ...).

But then, the Instant Game & Facebook App review process took less than 48h.

We still have many struggles with Facebook SDK functions not in C3 interface yet.

We successfully launch our first C3 Instant Game Yesterday [Morph] (open only to Canada for now): facebook.com/instantgames/play/240971203362509

Thanks a lot to C3 team and community!!