OpenFL preloader fonts not working

200 views Asked by At

Im using openfl and trying to use a webfont in the nmepreloader class.

I cant seem to get it to work even though I have the style sheet and index set up properly I think.

Here is my fontSyle.css

/* * * * FONTS * * * */

@font-face {
    font-family: 'Futura PT';
    src: url( 'assets/fonts/FuturaPT.woff' );
}

@font-face {
    font-family: 'Futura Bold PT';
    src: url( 'assets/fonts/FuturaBoldPT.woff' );
}

and my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="true" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta id="viewport" name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="fontStyle.css" />
    <link rel="stylesheet" type="text/css" href="gameStyle.css" />
</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
    WebFont.load( {
        custom: {
            families: ['Futura PT, Futura Bold PT'],
            urls:['./fontStyle.css']
        }
    } );
    </script>

    <div id="mainContainer" style="">

        <div id="unacceleratedDiv" style="background-color: #030C22; width: 100%; height: 100%; position: absolute;" data-framerate="60">
        <canvas width="0" height="0" id="unacceleratedCanvas" style="position: absolute; left: 0px; top: 0px; -webkit-transform-origin: 0px 0px; opacity: 1;">
        </canvas>
    </div>

    <div id="haxe:openfl" style="background-color: #030C22; width: 100%; height: 100%" data-framerate="60"></div>

    </div>

    <div id="iOS7HelperContainer" style="opacity: 0.7; visibility: hidden;">
        <div id="iOS7HelperOverlay" style="background: '' "></div>
    </div>

    <div id="noPortrait" class="BadOrientation BadOrientation--Portrait" style="visibility: hidden; background-size: contain;"></div>
    <div id="noLandscape" class="BadOrientation BadOrientation--Landscape" style="visibility: hidden; background-size: contain;"></div>

    <script type="text/javascript" src="./pixi.min.js"></script>
    <script type="text/javascript" src="./iOS7HelperOverlay.js"></script>
    <script id="haxe:openfl:script" type="text/javascript" src="./JourneyToTheWest.js"></script>

</body>
</html>

How can I use these fonts inside of the preloader.

0

There are 0 answers