Let's assume you have some fonts that you want to use for your application, stored under fonts/ directory. Your CSS file fonts.css will look something like this:
@font-face {
font-family: "digital";
src: url('fonts/digital-7 (mono).ttf');
}
You will not need to make any changes to that file. Your html file may have looked something like this:
<body onload="myMain()">
<canvas id="mainCanvas" width="600" height="600"></canvas>
</body>
You will have to change the html file to not load immediately because the issue arises from the browser's asynchronous loading of the font. This means that the font may not be ready when your javascript code finally runs. To call the myMain function only when the fonts load, we will use Google Web Font Loader. This way, the font will be pre-loaded and we can use that font in the canvas.
To do that, all you have to do is remove your call from the body's onload and add it to the activate callback from the WebFontConfig:
<script>
// load fonts before loading the game
WebFontConfig = {
custom: {
families: ['digital'],
urls: ['fonts.css']
},
active: function() {
myMain();
}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
Make sure to put the two scripts in that order! This is important because you must first create the WebFontConfig object which the webfont.js script will look for. Putting it all together, your html file will look like this:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>HTML 5 WebApp</title>
<script src="snake.js"></script>
<script>
// load fonts before loading the game
WebFontConfig = {
custom: {
families: ['digital'],
urls: ['fonts.css']
},
active: function() {
myMain();
}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
</head>
<body>
<canvas id="mainCanvas" width="600" height="600"></canvas>
</body>
</html>
Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klien... and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog
ReplyDeleteDafont.com is a site where you can download a ton of free fonts. You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style. You can also put in your own phrase to see how it looks in a particular font. A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts. Each selection also tells you whether your download is free for personal or commercial use. The download is easy – you get a zip file with the font file inside. Unzip, install, and you’re ready to go.
ReplyDeleteDafont.com is a site where you can download a ton of free fonts. You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style. You can also put in your own phrase to see how it looks in a particular font. A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts. Each selection also tells you whether your download is free for personal or commercial use. The download is easy – you get a zip file with the font file inside. Unzip, install, and you’re ready to go.
ReplyDeleteHi, i absolutely got tons of value from your post. Please i have 2 quick questions.
ReplyDelete1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
Finally, would you spare a few seconds to check this site and offer me your candid advice
http://www.pornhub.com