I’m working on Info Sec course’s Multiplayer Game. Using the font that was already linked in the provided boilerplate, I’ve got it working as the font for my game header, but usually, the font doesn’t show when visiting the page for the first time. If you hit refresh it will then display properly, but leave the site, and then go back to it, the font won’t display properly again until you refresh or hit enter on the address bar again.
FIRST VISIT TO SITE:
AFTER HITTING REFRESH:
Problem occurs on multiple different browsers. Site is Node.js hosted locally through VSCode. Font is called and drawn by Canvas Context, and is linked in the site header for the index.html.
FONT: Googles Press Start 2P
In the head of index.html (I’ve tried moving this around):
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../public/style.css" type="text/css" />
At the bottom of that same index.html (I’ve tried moving this around):
</body>
<script src="../public/game.mjs" type="module"></script>
</html>
And then in the game.mjs module:
function drawHeader () {
// Draw top header bar
context.fillStyle = 'darkgrey';
context.fillRect( 0, 0, width, header);
// Draw the game title
context.fillStyle = 'black';
context.font = "24px 'Press Start 2P'";
context.fillText ("TANK", 10, 35);
context.fillText ("BATTLE", 10, 65)
// Draw the menu header
context.font = "16px 'Press Start 2P'";
context.fillText ("Controls Score Rank", 200, 20);
(NOTE: this draw is called after connection is confirmed by DOMContentLoaded with the server, and the server has sent io.to(id).emit('Welcome') to the client in response to a new connection, and the client has received it with socket.on('Welcome'), then it calls this drawHeader function, so I know all the HTML elements are loaded.
THINGS I’VE TRIED:------------------------------------
-Moving the link tag around
-Moving the game.mjs script tag around
-Connecting a client, refreshing to display properly, and then connecting another didn’t work
-Putting font-family: 'Press Start 2P'; in the css file for the canvas element
-Put the below in the head… url pulled from googleapis Press Start 2P CSS file
<link rel="preload" href="https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nWivN04w.woff2" as="font" crossorigin="anonymous">
THINGS THAT MIGHT WORK: ---------------------------------------------
-Seen reference to some 3rd party Javascript font preloaders
-Wondering if delaring a new fontface or something in DOMContentLoaded would help
-Wondering if there is just a simple elegant solution that google is hiding from me
-Maybe it’s just an affect of hosting locally, and will go away when the project is uploaded to “replit” or “glitch”
Hoping someone has dealt with this and knows a good elegant fix, otherwise I may start playing with some 3rd party software, and may get as messy as making the page reload itself to simulate a page refresh.
