google-fonts-cli
Version:
a quick way to add a google font to your project
142 lines (125 loc) • 6.18 kB
HTML
<html class="no-js" lang=""><head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/pure-grid-7.css">
<link rel="stylesheet" href="css/lp.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header>
<div class='u-pad-left u-full-width'>
<button class="boots-flat-button">Get a Random Font!</button>
</div>
<div class="font-table">
<div class="row first">
<div class="font cell">
<a href="#" class="js-display text-lobster">
Lobster
</a>
<small>(a display font)</small>
</div>
<div class="example cell">
<span class="js-google-fonts text-lobster">google fonts</span>
</div>
</div>
<div class="row">
<div class="font cell">
<a href="#" class="js-sans text-lato">Lato</a>
<small>(a sans-serif font)</small>
</div>
<div class="example cell text-lato">
<span class="js-cli">command line interface</span>
</div>
</div>
</div>
</header>
<div class="container">
<!-- intern project-- replace with handlebars templates ?? -->
<article class="recent js-recent">
<section>
<div>
<h3>
<span class="text-lobster">
Lobster
</span>
•
<span class="text-lato">
Lato
</span>
<small>
Lobster
•
Lato
</small>
</h3>
</div>
</section>
</article>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/lp.js"></script>
<script>
var FONT_CACHE = [];
var _EXAMPLE = new BooTemplate("<span class='example' style='font-family:\"{{family}}\" {{category}};'>{{family}}</span>");
var _BAR = new BooTemplate("<section><div><h3>"+
"{{displayExample}} • {{sansExample}}"+
"<small>{{display}} • {{sans}}</small>"+
"</h3></div></section>");
getFonts("./../data/fonts.json", onFontCollectionLoaded);
function onFontCollectionLoaded(fonts) {
$("button").click(clickHandler);
// var timeout = setTimeout(clickHandler, 5000);
function clickHandler() {
clearTimeout(timeout);
var f1 = fonts.random("display"),
f2 = fonts.random("sans-serif");
FONT_CACHE.push([f1, f2]);
var $lastSeen = $(_BAR.compile({
display: f1.family,
displayExample: _EXAMPLE.compile(f1),
sans: f2.family,
sansExample: _EXAMPLE.compile(f2),
}));
$lastSeen.hide();
$(".js-recent").first("section").prepend($lastSeen);
$lastSeen.slideDown(600);
// inject link tags
$("head").append(toLinkTag(f1.family)).append(toLinkTag(f2.family));
// apply inline styles to "google fonts" heading
$(".js-google-fonts,.js-display").css("font-family", f1.family);
$('.js-display').text(f1.family);
// apply inline styles to "cli" heading
$(".js-cli,.js-sans").css("font-family", f2.family);
$(".js-sans").text(f2.family)
return clickHandler;
}
function toLinkTag(name) {
return $("<link rel='stylesheet' type='text/css'/>").attr("href", "https://fonts.googleapis.com/css?family="+encodeURIComponent(name))
}
}
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-63598506-6','auto');ga('send','pageview');
</script>
</body></html>