Google Font Explorer

Developer
Katy DeCorah
Size
4,632 Kb
Views
58,696
  1. Google Font Explorer Previews
  2. Google Font Explorer HTML Codes
  3. Google Font Explorer CSS Codes
  4. Google Font Explorer JS Codes

How do I make an google font explorer?

Preview Google Fonts better! You can test any Google Font family by typing it in. You can even randomize to find a new family.. What is a google font explorer? How do you make a google font explorer? This script and codes were developed by Katy DeCorah on 28 July 2022, Thursday.

Google Font Explorer Previews
IQ Test

Google Font Explorer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Font Explorer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://katydecorah.com/google-font-explorer/css/style.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @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 </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <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="http://www.google.com/fonts">Google Fonts API</a>.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Google Font Explorer - Script Codes CSS Codes

@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

Google Font Explorer - Script Codes JS Codes

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 = "http://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='http://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();
Google Font Explorer - Script Codes
Google Font Explorer - Script Codes
Home Page Home
Developer Katy DeCorah
Username katydecorah
Uploaded July 28, 2022
Rating 4.5
Size 4,632 Kb
Views 58,696
Do you need developer help for Google Font Explorer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katy DeCorah (katydecorah) Script Codes
Name
Google Static Map Maker
Rabbit by Beard Chicken
Map gallery
Angular Contact Form
Haml Clock
Instagram
Bowl of Trees
Twinner Spinner
Twinner Spinner II
Snowflaker 2016
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!