Skip to content

Instantly share code, notes, and snippets.

@jlogix

jlogix/gfonts-preview.html

Last active August 15, 2019 08:11
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jlogix/6d44d94ba2df8586ca3f6b4d91788bb0 to your computer and use it in GitHub Desktop.
Save jlogix/6d44d94ba2df8586ca3f6b4d91788bb0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gfonts-preview.html
<!DOCTYPE html>
<html>
<head>
<title>Google Fonts Preview</title>
<style>
#preview {
margin: 0 auto;
text-align: center;
width: 80%;
}
</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);
$(`<h1 style="font-family: '${k}'"/>`).text(`${k}: The quick brown Fox goes to Disney`).appendTo($('#preview'));
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment