Home Web Development JavaScript JavaScript Font Preview With Google Fonts | Fonts Manager & Compare

JavaScript Font Preview With Google Fonts | Fonts Manager & Compare

June 18, 2019

6703

How to detect, preview, & compare fonts using HTML CSS & JavaScript? Solution: JavaScript Font Preview With Google Fonts. In other words, Compare & manage fonts.

Every time when we develop any websites, then a very common problem appears. How fonts to use on our website, what fonts will be perfect for good UI? There are many online font managers to compare fonts with each other. But most of these use custom fonts mean you have to upload font then you can compare.

But today I will show you a font preview, manage, & compare with google fonts. Google font is a service of Google, they provide amazing fonts through CDN. Now you can compare may google fonts on your text online. Because after visiting this post, you will able to create an online font preview system using HTML, CSS & JavaScript.

So, Today I am sharing JavaScript Font Preview With Google Fonts. Compare, See Preview, & Manage Fonts with HTML, CSS, & JavaScript. This program fetches all google fonts using the JSON API provided by Google. There is a text field you can write or paste the text inside it, then you can choose a font from 100+ of google fonts. When you like or found a perfect font you can copy the fonts link code & paste it on HTML or CSS file.

Now you are thinking about how this font preview program looks like, then see the preview given below.

Preview Of Fonts Compare & Manager

See this video preview to getting an idea about this font manager.

Now you can see the program visually. I know this will be very useful, get the source code of its.

JavaScript Font Preview With Google Fonts Source Code

Before sharing source code, let’s talk about it. I created a sidebar for fonts list, header for the title, and copy button & a text area for writing. This is the part of HTML. In the CSS section, I placed every element. Sidebar placed at left, the header at the top and left other text-field. I did not create any anything special with HTML & CSS, I just created the frame and put class & IDs.

After getting the codes you will understand easily without any trouble. I fetched google fonts using API, which is provided by Google. You can create your own by clicking on this: Google Font API. You can also use my API as I used on this program. After that, I created a loop to print all fonts value, I created a loop to fetch all font sorting by their popularity.

After adding text on text-field, you can choose any font from the sidebar. Then the JavaScript will change the CSS as the current font value dynamically. There is a button for copy current font, JavaScript also stores current font in the button on click you can copy the whole stylesheet code.

That is the whole program, I can’t explain more in writing. See the codes then you will understand automatically. I told all about how functions works, now you have to see codes to understand this properly. For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com) -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	
    <title>JavaScript Font Manager | Webdevtrick.com</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <aside>
	<span><strong>Current Font:</strong></span><br>
        <div class="selected-font"></div>
        <div class="search-font">
            <input 
               type="text" 
                id="font-search" 
                aria-label="Search fonts"
                placeholder="Search...."
                onkeyup="searchFonts()">
        </div>
        
        <ul id="fonts"></ul>
    </aside>
    <main>
        <header>
            <div class="size">
        
			<h1>JavaScript - Google Font Manager</h1>

            <div class="copy-this-font"><button id="copy-this-font">Copy Font</button></div>
			</div>
        </header>
		
        <textarea id="content" placeholder="Type or Paste Text Here, &amp; Choose The Perfect Font."></textarea>  
		<span class="codeby">Code by <a href="https://webdevtrick.com">Webdevtrick</a></span>
    </main>
    <script src="function.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Font Manager | Webdevtrick.com</title>

</head>

<body>

<aside>

<span><strong>Current Font:</strong></span><br>

<input

type="text"

id="font-search"

aria-label="Search fonts"

placeholder="Search...."

onkeyup="searchFonts()">

</div>

</aside>

<main>

<h1>JavaScript - Google Font Manager</h1>

</div>

</header>

<span class="codeby">Code by <a href="https://webdevtrick.com">Webdevtrick</a></span>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com) **/
* {
  margin: 0;
  padding: 0;
}
aside {
  position: fixed;
  width: 20%;
  height: 100vh;
}
aside .selected-font, span {
  font-size: 22px;
  font-family: 'Quicksand', sans-serif;
  text-align: center;

}
aside .search-font {
  margin: 10px 0;
  text-align: center;
}
aside .search-font input {
  width: 80%;
  font-size: 15px;
  padding: 5px 10px;
}
aside #fonts {
  height: 100%;
  background: #F9F9F9;
  font-size: 1.2rem;
  padding-left: 0;
  overflow-y: scroll;
  list-style: none;
}
aside #fonts li {
  padding: 5px;
  cursor: pointer;
}
main {
  position: absolute;
  width: 80%;
  height: 100vh;
  left: 20%;
  background: #212121;
}
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 5vh;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.2rem;
  font-family: sans-serif;
  background: #e8e8e8;
  color: #444444;
}
header .size {
  width: 50%;
  text-align: left;
}
header .size {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
 header .size input[type="range"] {
  margin: 0 5px;
}
h1{
 position: absolute;
 left: 20%;
 top: 0;
}
header .copy-this-font button {
  width: 100px;
  height: 5vh;
  background-color: #48BDFF;
  border: none;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  top: 0;
  right: 0;
  position: absolute;

}
#content {
  width: 100%;
  height: 100vh;
  font-size: 50px;
  text-align: center;
  color: #fbfbfb;
  background: #363636;
  resize: none;
  overflow-x: hidden;
  border: 0;
}
#content:focus {
  outline: 0;
}
main .codeby {
	bottom: 5%;
	right: 3%;
	position: absolute;
	color: white;	
}
.codeby a {
	text-decoration: none;
	color: #FD3F42;
}
@media all and (max-width: 600px) {
  aside {
    width: 30%;
  }
  main {
    width: 70%;
    left: 30%;
  }
 h1 {
    display: none;
    }

}

@media all and (min-width: 1200px) {
  aside {
    width: 15%;
  }
  main {
    width: 85%;
    left: 15%;
  }
}

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

/** code by webdevtrick ( https://webdevtrick.com) **/

* {

margin: 0;

padding: 0;

}

aside {

position: fixed;

width: 20%;

height: 100vh;

}

aside .selected-font, span {

font-size: 22px;

font-family: 'Quicksand', sans-serif;

text-align: center;

}

aside .search-font {

margin: 10px 0;

text-align: center;

}

aside .search-font input {

width: 80%;

font-size: 15px;

padding: 5px 10px;

}

aside #fonts {

height: 100%;

background: #F9F9F9;

font-size: 1.2rem;

padding-left: 0;

overflow-y: scroll;

list-style: none;

}

aside #fonts li {

padding: 5px;

cursor: pointer;

}

main {

position: absolute;

width: 80%;

height: 100vh;

left: 20%;

background: #212121;

}

header {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

width: 100%;

height: 5vh;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

font-size: 1.2rem;

font-family: sans-serif;

background: #e8e8e8;

color: #444444;

}

header .size {

width: 50%;

text-align: left;

}

header .size {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

header .size input[type="range"] {

margin: 0 5px;

}

h1{

position: absolute;

left: 20%;

top: 0;

}

header .copy-this-font button {

width: 100px;

height: 5vh;

background-color: #48BDFF;

border: none;

color: #fff;

text-align: center;

text-decoration: none;

font-size: 16px;

cursor: pointer;

top: 0;

right: 0;

position: absolute;

}

#content {

width: 100%;

height: 100vh;

font-size: 50px;

text-align: center;

color: #fbfbfb;

background: #363636;

resize: none;

overflow-x: hidden;

border: 0;

}

#content:focus {

outline: 0;

}

main .codeby {

bottom: 5%;

right: 3%;

position: absolute;

color: white;

}

.codeby a {

text-decoration: none;

color: #FD3F42;

}

@media all and (max-width: 600px) {

aside {

width: 30%;

}

main {

width: 70%;

left: 30%;

}

h1 {

display: none;

}

@media all and (min-width: 1200px) {

aside {

width: 15%;

}

main {

width: 85%;

left: 15%;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com) **/
const content = document.querySelector('#content');
const fontListElement = document.querySelector('#fonts');
const copyBtn = document.querySelector('#copy-this-font');
const controls_selectedFont = document.querySelector('.selected-font');
let fontListFragment = document.createDocumentFragment();


fetch('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD2XlgdSV2aMaFApwYwRZPGty_5PDSUaZA')
  .then((r) => r.json())
  .then((fontsObject) => {
    for (font of fontsObject.items) {
      let fontFamily = font.family;
      let li = document.createElement('li');
      li.classList.add('font');
      li.setAttribute('data-value', fontFamily);
      li.setAttribute('tabindex', 0);
      li.innerText = fontFamily;
      li.style.fontFamily = fontFamily;

      fontListFragment.appendChild(li);
    }

    fontListElement.appendChild(fontListFragment);

  
    let chunkedFonts = chunk(fontsObject.items, 12);

    let importStatements = chunkedFonts
      .map((chunkedFontsArr) => {
        return `@import "https://fonts.googleapis.com/css?family=${chunkedFontsArr
          .map((f) => f.family)
          .join('|')}"`;
      })
      .join(';');

    let fontsStyle = document.createElement('style');
    fontsStyle.type = 'text/css';
    fontsStyle.innerHTML = importStatements;
    document.getElementsByTagName('head')[0].appendChild(fontsStyle);
  });

fontListElement.addEventListener('click', (e) => {
  if (isFontListItem(e.srcElement)) {
    let li = e.srcElement;
    let fontFamily = li.dataset.value;
    content.style.fontFamily = fontFamily;
    selectedFont(fontFamily);
    copyButton(fontFamily);
    e.stopPropagation();
  }
});

fontListElement.addEventListener('keyup', (e) => {
  if (e.keyCode == 9 && isFontListItem(e.target)) document.activeElement.click();
});

function isFontListItem(clickedElm) {
  return clickedElm.classList.contains('font');
}

function chunk(ar, size) {
  let buffer = [];
  return ar.reduce((acc, item, i) => {
    let isLast = i === ar.length - 1;

    if (buffer.length === size) {
      let theChunk = [...buffer];
      buffer = [item];
      return [...acc, theChunk];
    } else {
      buffer.push(item);
      if (isLast) {
        return [...acc, buffer];
      } else {
        return acc;
      }
    }
  }, []);
}

function searchFonts() {
  var input, filter, font, i, txtValue;
  input = document.querySelector("#font-search");
  filter = input.value.toUpperCase();
  font = document.getElementsByTagName("li");
  for (i = 0; i < font.length; i++) {
      txtValue = font[i].innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
          font[i].style.display = "";
      } else {
          font[i].style.display = "none";
      }
  }
}

function selectedFont(fontName) {
  controls_selectedFont.innerText = fontName;
}

function checkSpace(font) {
  return font.replace(/\s/g, '+');
}

function copyButton(fontName) { 
  copyBtn.addEventListener('click',function() {
   
    let copiedFont = checkSpace(fontName);
    var el = document.createElement('textarea');
    el.value = `<link href="https://fonts.googleapis.com/css?family=${copiedFont}" rel="stylesheet">`
    el.setAttribute('readonly', '');
    el.style = {position: 'absolute', left: '-9999px'};
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);

    
    copyBtn.innerHTML = `Copied`
    setTimeout(function() {
      copyBtn.innerHTML = `Copy Font`
    }, 500)
  })
}


function init() {
  controls_selectedFont.innerText = 'Please select a font...';
}
init();

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

/** code by webdevtrick ( https://webdevtrick.com) **/

const content = document.querySelector('#content');

const fontListElement = document.querySelector('#fonts');

const copyBtn = document.querySelector('#copy-this-font');

const controls_selectedFont = document.querySelector('.selected-font');

let fontListFragment = document.createDocumentFragment();

fetch('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD2XlgdSV2aMaFApwYwRZPGty_5PDSUaZA')

.then((r) => r.json())

.then((fontsObject) => {

for (font of fontsObject.items) {

let fontFamily = font.family;

let li = document.createElement('li');

li.classList.add('font');

li.setAttribute('data-value', fontFamily);

li.setAttribute('tabindex', 0);

li.innerText = fontFamily;

li.style.fontFamily = fontFamily;

fontListFragment.appendChild(li);

}

fontListElement.appendChild(fontListFragment);

let chunkedFonts = chunk(fontsObject.items, 12);

let importStatements = chunkedFonts

.map((chunkedFontsArr) => {

return `@import "https://fonts.googleapis.com/css?family=${chunkedFontsArr

.map((f) => f.family)

.join('|')}"`;

})

.join(';');

let fontsStyle = document.createElement('style');

fontsStyle.type = 'text/css';

fontsStyle.innerHTML = importStatements;

document.getElementsByTagName('head')[0].appendChild(fontsStyle);

});

fontListElement.addEventListener('click', (e) => {

if (isFontListItem(e.srcElement)) {

let li = e.srcElement;

let fontFamily = li.dataset.value;

content.style.fontFamily = fontFamily;

selectedFont(fontFamily);

copyButton(fontFamily);

e.stopPropagation();

}

});

fontListElement.addEventListener('keyup', (e) => {

if (e.keyCode == 9 && isFontListItem(e.target)) document.activeElement.click();

});

function isFontListItem(clickedElm) {

return clickedElm.classList.contains('font');

}

function chunk(ar, size) {

let buffer = [];

return ar.reduce((acc, item, i) => {

let isLast = i === ar.length - 1;

if (buffer.length === size) {

let theChunk = [...buffer];

buffer = [item];

return [...acc, theChunk];

} else {

buffer.push(item);

if (isLast) {

return [...acc, buffer];

} else {

return acc;

}

}, []);

}

function searchFonts() {

var input, filter, font, i, txtValue;

input = document.querySelector("#font-search");

filter = input.value.toUpperCase();

font = document.getElementsByTagName("li");

for (i = 0; i < font.length; i++) {

txtValue = font[i].innerText;

if (txtValue.toUpperCase().indexOf(filter) > -1) {

font[i].style.display = "";

} else {

font[i].style.display = "none";

}

function selectedFont(fontName) {

controls_selectedFont.innerText = fontName;

}

function checkSpace(font) {

return font.replace(/\s/g, '+');

}

function copyButton(fontName) {

copyBtn.addEventListener('click',function() {

let copiedFont = checkSpace(fontName);

var el = document.createElement('textarea');

el.value = `<link href="https://fonts.googleapis.com/css?family=${copiedFont}" rel="stylesheet">`

el.setAttribute('readonly', '');

el.style = {position: 'absolute', left: '-9999px'};

document.body.appendChild(el);

el.select();

document.execCommand('copy');

document.body.removeChild(el);

copyBtn.innerHTML = `Copied`

setTimeout(function() {

copyBtn.innerHTML = `Copy Font`

}, 500)

})

}

function init() {

controls_selectedFont.innerText = 'Please select a font...';

}

init();

That’s It. Now you have successfully created JavaScript Font Preview Program With Google Fonts. In other words, Font preview, manager, & compare program online. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

Shekhar June 19, 2019 At 6:56 am

Loved it ❤️💙.

Reply
- shaan June 19, 2019 At 10:41 am
  
  thank you very much.
  
  Reply

JavaScript Font Preview With Google Fonts | Fonts Manager & Compare

Preview Of Fonts Compare & Manager

JavaScript Font Preview With Google Fonts Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY