<div class="header">
  <div class="container">
    <div class="search-container">
      <label for="font"><i class="fa fa-search"></i></label>
      <input id="font-search" class="font-search" type="text" value="" data-provide="typeahead" title="Search for a Google Font">
      <i class="fa fa-refresh random" title="Get a random font"></i>
    </div>
  </div>
</div>
<div class="container" id="content">
  <div class="main">
    <h1>Lorem Ipsum</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    <p>Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quam error vitae eaque vero molestiae eius perferendis aspernatur unde earum eos sit. Perspiciatis eius similique obcaecati quasi quidem odit voluptatem.</p>
    <h2>Header Level 2</h2>
    <p>Repellat a possimus suscipit pariatur temporibus facilis sint modi fugit voluptate est aspernatur porro hic odit facere dolor veritatis odio nisi. Ipsum?</p>
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Perspiciatis eius similique obcaecati quasi quidem odit voluptatem.</li>
    </ol>
    <h3>Header Level 3</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Mauris placerat eleifend leo.</li>
    </ul>

  </div>
  <aside class="sidebar">
    <div id="variants"></div>
    <h2>History</h2>
    <ul id="visited" class="history"></ul>
  </aside>
</div>
<div class="container">
  <div class="colophon">
    <p>There are currently <span id="count"></span> font families.</p>
    <p>Made by <a href="http://katydecorah.com">Katy DeCorah</a> with the <a href="https://www.google.com/fonts">Google Fonts API</a>.</p>
  </div>
</div>
@import "compass/css3";

// You can check out the repo for the Sass, I'm too lazy to update it here:
// https://github.com/katydecorah/google-font-explorer
var url ="https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDK4Jz71F7DQCrUhXYaF3xgEXoQGLDk5iE";

var family = "";
runFont(family);
var families = [];
var visited = [];


$.getJSON(url,function(json){

  // counts all the families
  var countFamilies = json.items.length;
  $("#count").text(countFamilies);

  // pushes all the font families to an array
  $.each(json.items,function(i,type){
    families.push(type.family);
  });
});



// Bootstrap Typeahead
$('#font-search').typeahead({
  source: families,
  updater:function (item) {
    runFont(item);
    $("#font-search").attr("placeholder",item);
  }
});

// Gets the font based on family name
function runFont(family) {
  $.getJSON(url,function(json){
    $.each(json.items,function(i,type){
      if (type.family === family) {
        var familyPlus = family.replace(/\s/g, '+');
        var familyCSS = "https://fonts.googleapis.com/css?family=" + familyPlus + ":" + type.variants + "";
        var details = $("#variants");

        // Removes previous family and style
        $(".style").remove();
        $("style").remove();
        details.empty();

        // Grabs family details
        details.append("<div class='detail-title'>Variants</div><ul class='list-variant'></ul>");
        $(type.variants).each(function(index, item) {
          $(".list-variant").append(
            $(document.createElement('li')).text(item)
          );
        });
        details.append("<div class='detail-title'>Subsets</div><ul class='list-subsets'></ul>");
        $(type.subsets).each(function(index, item) {
          $(".list-subsets").append(
            $(document.createElement('li')).text(item)
          );
        });
        details.append("<div class='detail-title horizontal'>Version</div><div class='detail-data'>" + type.version + "</div>");
        details.append("<div class='detail-title horizontal'>Last Modified</div><div class='detail-data'>" + type.lastModified + "</div>");
        details.append("<div class='detail-title'>HTML</div><div class='detail-data'><pre><code class='language-markup'>&lt;link href='"+familyCSS+"' rel='stylesheet' type='text/css'&gt;</code></pre></div>");
        details.append("<div class='detail-title'>CSS</div><div class='detail-data'><pre><code class='language-css'>font-family: '"+family+"', sans-serif;</code></pre></div>");
        details.append("<a href='https://www.google.com/fonts#UsePlace:use/Collection:"+familyPlus+"' class='btn'>View on Google Fonts &rarr;</a>");

        // Grabs the Google Font
        $("head").append("<link href='"+ familyCSS +"' rel='stylesheet' type='text/css' class='style'>");
        $("body").css("font-family",family);

        // If family has italic or bold, allow it
        if(details.text().match('italic')){
          $("head").append("<style>.main em { font-style: italic; }");
        }
        if(details.text().match('700')){
          $("head").append("<style>.main strong,h1,h2,h3 { font-weight: 700; }");
        }
        else if(details.text().match('800')){
          $("head").append("<style>.main strong,h1,h2,h3 { font-weight: 800; }");
        }
        else if(details.text().match('900')){
          $("head").append("<style>.main strong,h1,h2,h3 { font-weight: 900; }");
        }

        // Save visited families
        visited.push( family );
        var visit="";
        $.each(visited, function(i, val) {
          visit+= "<li class='link-history' data-family='"+ val +"'>" + val + "</li>";
        });
        $('#visited').html(visit);

        // Creates link to view that font again
        $(".link-history").click(function(){
          var dat = $(this).attr("data-family");
          runFont(dat);
          $("#font-search").attr("placeholder",dat);

          // remove first instance from array
          if ($.inArray(dat, visited) !== -1) {
            visited.splice( $.inArray(dat, visited), 1 );
          }
        });

      }
    });
  });
}


// Gets a random font
function random() {
  $.getJSON(url,function(json){
    var count = json.items.length,
    random = Math.ceil(Math.random() * count);
    $.each(json.items,function(i,type){
      if(i === random){
        var family = type.family;
        $("#font-search").attr("placeholder", family);
        runFont(family);
      }
    });
  });
}

// Picks a random font on click
$(".random").click(function(){
  random();
});

// Runs to fetch random font
random();

External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
  2. https://katydecorah.com/google-font-explorer/css/style.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js