Google Fonts Display with JavaScript

A few months ago I had a client with trouble deciding on a font for the title of his website. The problem he was having is that he knew what he didn’t want but not how to express exactly what he wanted, nor did he have any examples of fonts he liked. After many attempts to find the perfect fit for his site and learning much of what he didn’t want and little of what he did I decided to make the process a little easier for both of us.

I set aside a page on the development site for viewing fonts. I then went to Google Fonts and using what he didn’t want as negative qualifiers I found all the fonts that did not have aspects he didn’t like. At this point I could take this and write out A LOT of CSS or do something creative with JavaScript. I chose the latter.

For loop to run through font types and display

for (var i = 0; i <= numFonts; i++)
  {
    fontFamilyStyle = "<h1 style=\"font-weight: 400; font-style: normal; font-family: ";
    fontFam = fontArray[i];
    iteration = (i + 1) + ". ";

    bckgrnd(i);//alternates background color

    //Removes '+' and ':' from font family
    while (fontFam.indexOf('+') > -1)
    {
      fontFam = fontFam.replace('+', ' ');
    };

    if (fontFam.indexOf(':') > -1)
    {
      fontFam = fontFam.substring(0, fontFam.indexOf(':'));
    };

    postText();//Gets text based on which view selected

    document.write(iteration + fontFam + fontFamilyStyle + fontFamily + "<br />");

    fontStyle(fontArray[i]);

    document.write("</div>");//ends background div
  };

Functions

• bckgrnd() alternates the background color based on if i is even.
• postText() writes the appropriate text.
• fontStyle() determines the weight of the font, if multiple weights are available from Google.

This turned out to be a very popular form of choosing the font as he was able to decide very quickly. He then asked that I do the same for his subtitle and posts as he wanted similar but different fonts for each. To save time I added the details in directly and used Hipster Ipsum for a sample blog post. Using a switch statement I was able to allow him to choose which text in the associated fonts.

Text to display for each font

function postText() {
  switch (fontView) {
    case "title":
      fontFamily = fontFam + ";\">Website Title</h1>";
      break;
    case "subtitle":
      fontFamily = fontFam + ";\">Website subtitle</h1>";
      break;
    case "post":
      fontFamily = "<style>font-weight: 400; font-style: normal; font-family: " + fontFam + "; < /style><h3>Blog Post Example</h3><br /><p style=\"text-align: justify;\">Hipster Ipsum to display what a post would look like in each font.</p>";
      break;
    default:
      alert("No class selected to display");
      break;
  }
}

Since he had different preferences for each of the areas he would be using a font I went back and added in specific fonts from Google and allowed for each fontView (title, subtitle, post) to have it’s own set of Google Fonts.

Function to select fonts for the fontView

function fontfor()
{
  var fonts;
  switch (fontView) {
    case "title":
      fonts = ['fonts for title'];
      document.write("<link href='https://fonts.googleapis.com/css?family=' rel='stylesheet' type='text/css' />");
      break;
    case "subtitle":
      fonts = ['fonts for subtitle'];
      document.write("<link href='https://fonts.googleapis.com/css?family=' rel='stylesheet' type='text/css' />");
      break;
    case "post":
      fonts = ['fonts for post'];
      document.write("<link href='https://fonts.googleapis.com/css?family=' rel='stylesheet' type='text/css' />");
      break;
  }
  fontArray = fonts;
}

Given that this was a bit of a hack with the fonts and the text hardcoded into the JavaScript I have since abstracted those out. I am currently working on setting it up so that the font selection choices and text can be added from the page. Once finished I will post again with the new code.