skip to content
Site header image Nerdy Momo Cat

Test Which Fonts You’d Like

Coding Tips Webtrotion

Now that Webtrotion supports direct font names, has simplified font configuration, you might want to test how different fonts would look on your website. To do this, open the dev console [a] on any Webtrotion powered website, like this one, and paste this snippet into the console tab after changing the sans and mono font names to the ones you want to try [b].

(function() {
  const sans = 'Inter';      // change to any Google Sans font
  const mono = 'Geist Mono';  // change to any Google Monospace font

  // Create Google Fonts URL with all weights + italics
  const googleFontsURL = `https://fonts.googleapis.com/css2?family=${sans.replace(/ /g,'+')
  }:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=${mono.replace(/ /g,'+')
  }:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap`;

  // Inject link tag for Google Fonts
  const link = document.createElement('link');
  link.href = googleFontsURL;
  link.rel = 'stylesheet';
  document.head.appendChild(link);

  // Override CSS variables globally
  const style = document.createElement('style');
  style.textContent = `
    :root {
      --font-sans: '${sans}', system-ui, sans-serif !important;
      --font-mono: '${mono}', monospace !important;
      --default-font-family: '${sans}', system-ui, sans-serif !important;
      --default-mono-font-family: '${mono}', monospace !important;
    }
  `;
  document.head.appendChild(style);

  // Apply sans font to body immediately
  document.body.style.fontFamily = `var(--font-sans)`;
})();

Footnotes

  1. [a]
    The Chrome developer console shortcut is Ctrl + Shift + J for Windows/Linux and Cmd + Opt + J for Mac.
  2. [b]
    Note that font names are case-sensitive, so using geist mono won't work since the font name is Geist Mono.