-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (55 loc) · 1.83 KB
/
index.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<title>Swanix - Fonts Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.ico">
<meta property="og:image" content="img/page-thumb.png" />
<meta name="twitter:image" content="img/page-thumb.png" />
<style>
body {
font-family: sans-serif;
}
h2 {
font-size: 64px;
}
h6 {
font-size: 18px;
font-weight: 200;
color: #5e5e5e;
}
#preview {
margin: 0 auto;
text-align: center;
width: 80%;
overflow: hidden;
/* display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 30px;
row-gap: 15px; */
}
a {
color: #999;
text-decoration: none;
}
</style>
</head>
<body>
<div id="preview"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$.getJSON('https://raw.githubusercontent.com/jonathantneal/google-fonts-complete/master/google-fonts.json', function(fonts) {
$.each(fonts, function(k, v) {
//if (v.category!=='sans-serif') return; //filter only sans-serif fonts. replace with your filter condition(s)
var css = `@import url('https://fonts.googleapis.com/css?family=${k}');`;
$('<style/>').append(css).appendTo(document.head);
$(`<h2 style="font-family: '${k}';margin-bottom:0;">/>`).text(`SWANIX`).appendTo($('#preview')).addClass( "inner" );
$(`<h6 style="font-family: sans-serif;margin-top:0;"/>`).text(`${k}`).appendTo($('#preview')).addClass( "inner" );
// Each End
});
});
});
</script>
</body>
</html>