Bootstrap Snippet Google Font Previewer / Selector using HTML Bootstrap jQuery

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div style="padding: 0 40px;">
<div class="form-group">
    <div class="row">
        <div class="col-md-12">
            <label>Available Fonts:</label>
        </div>
    </div>
    
    <div class="row" style="margin-bottom: 10px; ">
        <div class="col-md-3">
            <label>Types:</label>
            <select name="fontType" id="fontType" class="form-control">
                <option value="">All Types</option>
            </select>
        </div>
        <div class="col-md-3">
            <label>Styles:</label>
            <select name="fontVariant" id="fontVariant" class="form-control">
                <option value="">All Styles</option>
            </select>
        </div>
        <div class="col-md-3">
            <label>Search:</label>
            <input id="searchText" type="text" value="" name="searchText" class="form-control">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <select name="googleFont" id="googleFont" class="form-control" size="5">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
    var fonts = {};
    function loadCSS(href) {
        var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
        $("head").append(cssLink);
    }
    function loadJS(src) {
        var jsLink = $("<script type='text/javascript' src='"+src+"'>");
        $("head").append(jsLink);
    }
    function getFont(fontName) {
        var ret = null;
        $.each(fonts.items, function(idx, font) {
            if (font.family == fontName) {
                ret = font;
            }
        });
        return ret;
    }
    function loadFont(fontName) {
        loadCSS('http://fonts.googleapis.com/css?family=' + fontName);
        $('#font-preview').css('font-family', fontName);
        doesSupportItalics(fontName);
        populateWeights(getFont(fontName));
    }
    function doesSupportItalics(fontName) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Google Font Previewer / Selector"
Bootstrap 3.3.0 Snippet by fractorr

Related: See More

Questions / Comments:

"Google Font Previewer / Selector" Bootstrap 3.3.0 Snippet by fractorr

Related: See More

Questions / Comments:

"Google Font Previewer / Selector"
Bootstrap 3.3.0 Snippet by fractorr