Dynamically loading Google Fonts

Google Fonts is a great tool for web developers, it allows you to load in almost any font on to you website and use it with only a few lines of code. However, sometimes you need to load in a font after the page loads. Here is a quick way to do it.

Google Fonts are loaded in the head tag of your page using a link tag, this is typically done when the page loads. If you want to load in a font after you can still just insert a link tag using some javascript. Here's how:

 1function loadFont(fontName) {
 2  // First check if the element is in the page
 3  if (
 4    document.querySelector(
 5      `link[href="https://fonts.googleapis.com/css?family=${fontName.replace(
 6        /\s/g,
 7        "+"
 8      )}"]`
 9    ) == null
10  ) {
11    // If not create a new link tag
12    const link = document.createElement("link");
13    // set the rel property to stylesheet
14    link.rel = "stylesheet";
15    // Set the href to the google fonts URL with your custom font name
16    link.href = `https://fonts.googleapis.com/css?family=${fontName.replace(
17      /\s/g,
18      "+"
19    )}`;
20    // Append the new element to the head of the document
21    document.head.appendChild(link);
22  }
23}

What this function does is take a font name i.e. Open Sans, and checks if the font is already loaded on the page. Then if it's not it creates a new font tag and inserts it in the head of the document. Once the font is loaded in any elements with the Open Sans font family set will automatically change, this also works in the canvas element. One thing to note is in the URL the spaces in the font name need to be replaced with pluses, which is taken care of using a RegExp.