Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active March 22, 2018 19:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/76b00a3aa08d7161b980d915db6a85a2 to your computer and use it in GitHub Desktop.
Save aaizemberg/76b00a3aa08d7161b980d915db6a85a2 to your computer and use it in GitHub Desktop.
Download ZIP
xkcd font
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>xkcd font</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
<style>
@font-face {
font-family: xkcd;
src: url('https://cdn.rawgit.com/ipython/xkcd-font/master/xkcd-script/font/xkcd-script.woff') format('woff');
}
.xkcd {
font-family: xkcd;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="60"></canvas>
<br>
<script>
WebFont.load({
custom: {
families: ['xkcd']
},
active: function() {
draw();
}
});
function draw() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "2em xkcd";
ctx.fillText("Using the xkcd font (html5 canvas)",0,30);
}
</script>
<svg width="600" height="40">
<text x="0" y="30" font-family="xkcd" font-size="2em">
Using the xkcd font (SVG)
</text>
</svg>
<h1 class='xkcd'>Using the xkcd font (HTML)</h1>
<p class='xkcd'>more info: <a href='https://github.com/ipython/xkcd-font'>https://github.com/ipython/xkcd-font</a></p>
<hr>
<h2 class='xkcd'>What is Lorem Ipsum?</h2>
<p class='xkcd'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment