CODEWITHSUNDEEP
javascriptcsshtmlfontscreatejs
Chunky Chunk
Chunky Chunk

Reputation: 17217

Specified Google font not displaying with EasleJS canvas

My attempts to display a specific non-web-safe font has surprisingly proved to be much more difficult than I could have ever imagined. I assume there is some typo in my code or some other glaring error that escapes me because displaying a font shouldn't be this difficult.

index.html:

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>

        <link rel="stylesheet" type="text/css" href="resources/css/main.css">
    </head>
    <body>
        <canvas id="canvas"></canvas>

        <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
        <script type="text/javascript" src="resources/js/main.js"></script>
    </body>
</html>

main.css:

@import url("fonts.css");

body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: inherit;
}

fonts.css:

@font-face {
    font-family: "Muli-Regular";
    src: url("https://fonts.googleapis.com/css?family=Muli:400");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Muli-Semi-Bold";
    src: url("https://fonts.googleapis.com/css?family=Muli:600");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Muli-Bold";
    src: url("https://fonts.googleapis.com/css?family=Muli:700");
    font-weight: 700;
    font-style: normal;
}

main.js:

const stage = new createjs.Stage("canvas");
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;

const title = new createjs.Text();
title.text = "This is my text to display";
title.font = "50px Muli-Regular";
title.color = "#000000";

stage.addChild(title);
stage.update();

Result: (This is not the correct font)

enter image description here

Upvotes: 0

Views: 226

Answers (1)

Catalin Iancu
Catalin Iancu

Reputation: 722

This method worked for me:

@font-face {
    font-family: 'YourFontName';
    src: url('font_path.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

However, as you can see, I was using a local custom font file. I am not sure if the fact that the font file is hosted somewhere else has any relevance.

Upvotes: 2

Related Questions