August 4, 2019

Google Font Selector With jQuery

In this article, we going see how to change the Google fonts in the website dynamically with a dropdown. Google has given various web font API which helps you to use a lot of font styles on your websites. By using jQuery plugin font selector to choose from a huge number of fonts available as section of the Google web fonts. Now here the users easily choose and preview a font from Google wide range of available fonts.

By using jQuery here we going to use google web font API to convert you simple website font into various fashionable fonts. Using a select box with lot’s of font family and you can choose your favorite fonts at any time and any font it dynamic render font family to CSS and convert you simple website fonts into fashionable font’s.

index.html

<!doctype html>
<html>

<head>
    <title>Google Font Selector With jQuery</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="script.js"></script>
    <script>
        $(function() {
            $('#myfonts').fontselect().change(function() {
                var font = $(this).val().replace(/\+/g, ' ');
                font = font.split(':');
                $('h1, h2, h3, h4, h5, h6, p').css('font-family', font[0]);
            });
        });
    </script>
</head>

<body>

    <div class="container-fluid">
        <div class="col-md-12">

            <div class="row">
                <h1 class="text-center">Google Font Selector With jQuery</h1>
                <br/>
            </div>

            <div class="col-md-8 card">
                <!-- Start Paragraph  -->
                <div class="row">
                    <h2>Heading Text</h2>
                    <p>Examples using standard <code>h1</code> to <code>h6</code> html tags</p>
                    <h1>h1. Heading</h1>
                    <h2>h2. Heading</h2>
                    <h3>h3. Heading</h3>
                    <h4>h4. Heading</h4>
                    <h5>h5. Heading</h5>
                    <h6>h6. Heading</h6>
                </div>
                <div class="row">
                    <h2>Paragraph Text</h2>
                    <p>SoftAOX.info is a best programming & web development blog. We make the useful and best tutorials for web professionals — developers, programmers, site owners and freelancers. Any viewer of this site is free to browse our tutorials and download scripts. You can get the code to make it your web design & web applications better. Easy and secure to use with proper examples. We cover PHP, MySql, AngularJS, Ajax, jQuery, HTML, CSS, Photoshop, Illustrator.</p>

                    <p>SoftAOX.info is a best programming & web development blog. We make the useful and best tutorials for web professionals — developers, programmers, site owners and freelancers. Any viewer of this site is free to browse our tutorials and download scripts. You can get the code to make it your web design & web applications better. Easy and secure to use with proper examples. We cover PHP, MySql, AngularJS, Ajax, jQuery, HTML, CSS, Photoshop, Illustrator.</p>

                    <p class="lead">SoftAOX.info is a best programming & web development blog. We make the useful and best tutorials for web professionals developers, programmers, site owners and freelancers. Any viewer of this site is free to browse our tutorials and download scripts.</p>

                </div>
                <!-- End Paragraph  -->
            </div>
            <div class="col-md-4 card">
                <!-- Font Select -->
                <h2>Select Your Font</h2>

                <input id="myfonts" type="text" />

                <!-- End Font Select -->
            </div>

        </div>

    </div>

</body>

</html>

<!doctype html>

<html>

<head>

<title>Google Font Selector With jQuery</title>

$(function() {

$('#myfonts').fontselect().change(function() {

var font = $(this).val().replace(/\+/g, ' ');

font = font.split(':');

$('h1, h2, h3, h4, h5, h6, p').css('font-family', font[0]);

});

</script>

</head>

<body>

<h1 class="text-center">Google Font Selector With jQuery</h1>

<br/>

</div>

<h2>Heading Text</h2>

<p>Examples using standard <code>h1</code> to <code>h6</code> html tags</p>

<h1>h1. Heading</h1>

<h2>h2. Heading</h2>

<h3>h3. Heading</h3>

<h4>h4. Heading</h4>

<h5>h5. Heading</h5>

<h6>h6. Heading</h6>

</div>

<h2>Paragraph Text</h2>

<p>SoftAOX.info is a best programming & web development blog. We make the useful and best tutorials for web professionals — developers, programmers, site owners and freelancers. Any viewer of this site is free to browse our tutorials and download scripts. You can get the code to make it your web design & web applications better. Easy and secure to use with proper examples. We cover PHP, MySql, AngularJS, Ajax, jQuery, HTML, CSS, Photoshop, Illustrator.</p>

<p class="lead">SoftAOX.info is a best programming & web development blog. We make the useful and best tutorials for web professionals developers, programmers, site owners and freelancers. Any viewer of this site is free to browse our tutorials and download scripts.</p>

</div>

</div>

<h2>Select Your Font</h2>

</div>

</body>

</html>

style.css

body {
  background-color: #f5f5f5;
}
.card {
  background: #FFF;
  border: 1px solid #f7f6f6;
  padding: 50px;
  box-shadow: 2px 2px 4px 5px #efefef;
}
.selectfont {
  font-size: 16px;
  width: 210px;
  position: relative;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.selectfont .my-drop {
  background: #fff;
  border: 1px solid #aaa;
  border-top: 0;
  position: absolute;
  top: 29px;
  left: 0;
  -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
  -moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);
  -o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);
  box-shadow        : 0 4px 5px rgba(0,0,0,.15);
  z-index: 999;
}

.selectfont > a {
  background-color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #e4e4e4;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 34px;
  line-height: 34px;
  padding: 0 0 0 8px;
  color: #989898;
  text-decoration: none;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.selectfont > a span {
  margin-right: 26px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  line-height: 2;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  cursor: pointer;
}

.selectfont > a div {
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius   : 0 4px 4px 0;
  border-radius        : 0 4px 4px 0;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  height: 100%;
  width: 14px;
}

.selectfont > a div b {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 0.6em;
  color: #555;
}

.selectfont > a div b:after {
  content: "\25bc";
}

.selectfont .my-drop {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius   : 0 0 4px 4px;
  border-radius        : 0 0 4px 4px;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  border: 1px solid #ccc;
  top: 34px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}

.selectfont .dp-show {
  margin: 0 4px 4px 0;
  max-height: 190px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.selectfont .dp-show li {
  line-height: 80%;
  padding: 7px 7px 8px;
  margin: 0;
  list-style: none;
  font-size: 18px;
}

.selectfont .dp-show li.active {
  background-color: #428bca;
  color: #fff;
  cursor: pointer;
}
.selectfont .dp-show li em {
  background: #feffde;
  font-style: normal;
}

.selectfont .dp-show li.active em {
  background: transparent;
}

.selectfont-active > a {
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
  -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
  -o-box-shadow     : 0 0 5px rgba(0,0,0,.3);
  box-shadow        : 0 0 5px rgba(0,0,0,.3);
  border: 1px solid #5897fb;
}

.selectfont-active > a {
  border: 1px solid #ccc;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  -moz-box-shadow   : 0 1px 0 #fff inset;
  -o-box-shadow     : 0 1px 0 #fff inset;
  box-shadow        : 0 1px 0 #fff inset;
  -webkit-border-bottom-left-radius : 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft : 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-left-radius : 0;
  border-bottom-right-radius: 0;
}

.selectfont-active > a div {
  background: transparent;
  border-left: none;
}

.selectfont-active > a div b:after {
  content: "\25b2";
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

body {

background-color: #f5f5f5;

}

.card {

background: #FFF;

border: 1px solid #f7f6f6;

padding: 50px;

box-shadow: 2px 2px 4px 5px #efefef;

}

.selectfont {

font-size: 16px;

width: 210px;

position: relative;

display: inline-block;

zoom: 1;

*display: inline;

}

.selectfont .my-drop {

background: #fff;

border: 1px solid #aaa;

border-top: 0;

position: absolute;

top: 29px;

left: 0;

-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);

-moz-box-shadow : 0 4px 5px rgba(0,0,0,.15);

-o-box-shadow : 0 4px 5px rgba(0,0,0,.15);

box-shadow : 0 4px 5px rgba(0,0,0,.15);

z-index: 999;

}

.selectfont > a {

background-color: #fff;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 2px;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

border: 1px solid #e4e4e4;

display: block;

overflow: hidden;

white-space: nowrap;

position: relative;

height: 34px;

line-height: 34px;

padding: 0 0 0 8px;

color: #989898;

text-decoration: none;

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);

box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);

}

.selectfont > a span {

margin-right: 26px;

display: block;

overflow: hidden;

white-space: nowrap;

line-height: 2;

-o-text-overflow: ellipsis;

-ms-text-overflow: ellipsis;

text-overflow: ellipsis;

cursor: pointer;

}

.selectfont > a div {

-webkit-border-radius: 0 4px 4px 0;

-moz-border-radius : 0 4px 4px 0;

border-radius : 0 4px 4px 0;

-moz-background-clip : padding;

-webkit-background-clip: padding-box;

background-clip : padding-box;

position: absolute;

right: 0;

top: 0;

display: block;

height: 100%;

width: 14px;

}

.selectfont > a div b {

position: relative;

display: block;

width: 100%;

height: 100%;

cursor: pointer;

font-size: 0.6em;

color: #555;

}

.selectfont > a div b:after {

content: "\25bc";

}

.selectfont .my-drop {

-webkit-border-radius: 0 0 4px 4px;

-moz-border-radius : 0 0 4px 4px;

border-radius : 0 0 4px 4px;

-moz-background-clip : padding;

-webkit-background-clip: padding-box;

background-clip : padding-box;

border: 1px solid #ccc;

top: 34px;

-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);

box-shadow: 0 6px 12px rgba(0,0,0,0.175);

}

.selectfont .dp-show {

margin: 0 4px 4px 0;

max-height: 190px;

width: 100%;

padding: 0;

position: relative;

overflow-x: hidden;

overflow-y: auto;

}

.selectfont .dp-show li {

line-height: 80%;

padding: 7px 7px 8px;

margin: 0;

list-style: none;

font-size: 18px;

}

.selectfont .dp-show li.active {

background-color: #428bca;

color: #fff;

cursor: pointer;

}

.selectfont .dp-show li em {

background: #feffde;

font-style: normal;

}

.selectfont .dp-show li.active em {

background: transparent;

}

.selectfont-active > a {

-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);

-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);

-o-box-shadow : 0 0 5px rgba(0,0,0,.3);

box-shadow : 0 0 5px rgba(0,0,0,.3);

border: 1px solid #5897fb;

}

.selectfont-active > a {

border: 1px solid #ccc;

-webkit-box-shadow: 0 1px 0 #fff inset;

-moz-box-shadow : 0 1px 0 #fff inset;

-o-box-shadow : 0 1px 0 #fff inset;

box-shadow : 0 1px 0 #fff inset;

-webkit-border-bottom-left-radius : 0;

-webkit-border-bottom-right-radius: 0;

-moz-border-radius-bottomleft : 0;

-moz-border-radius-bottomright: 0;

border-bottom-left-radius : 0;

border-bottom-right-radius: 0;

}

.selectfont-active > a div {

background: transparent;

border-left: none;

}

.selectfont-active > a div b:after {

content: "\25b2";

}

Preview & Download

Fonts

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Google Font Selector With jQuery

Share:

index.html

style.css

Preview & Download

Mraj

Don't miss on latest updates