-
Notifications
You must be signed in to change notification settings - Fork 1
/
custom-font-loader.html
34 lines (31 loc) · 1.11 KB
/
custom-font-loader.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: Custom Font Loader | Revolve.js</title>
<!-- Include the web font loader we'll use to ensure custom fonts have loaded
before rendering our clock. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.3.0/webfont.js" type="text/javascript"></script>
<!-- Include the packaged (.pkgd) version of Revolve.js, which contains all
predefined Revolve.js themes. -->
<script src="../dist/revolve.pkgd.min.js" type="text/javascript"></script>
<!-- Use the WebFont loader to request our font. When fonts are received,
initialize the Revolve.js clock control. -->
<script type="text/javascript">
WebFont.load({
google: { families: ['Six Caps'] }, // fonts we want
active: function() {
// (Okay, fonts have loaded)
let can = document.querySelector('canvas');
Revolve.clock( can.getContext('2d'), { theme: 'uptown' } );
},
inactive: function() {
console.error('Font load failed.');
}
});
</script>
</head>
<body>
<canvas width="512" height="512"></canvas>
</body>
</html>