DrLunesTypeManager by biojazzard

Typekit and Google WebFontLoader Manager for ProcessWire


ProcessWire Module Helper for Typekit´s WebFontLoader.

DrLunesTypeManager is a Template Helper.

DrLunesTypeManager asks you for a typekit ID, Google Fonts Family, CDN, Custom CSS and more, and outputs the code needed to use this fonts in your templates. It also forces some tags to use this fonts and your custom CSS styles to be applied to the page.


Inspired by Dr. Rober´s needs.

ProcessWire is about efficient code, but sometimes humans need helpers.

Install Via PW:

  • Download zip
  • Use modules administrator in PW to upload it to the server.
  • Open it and configure it with your settings.

Install Via GIT:

I´m not a git pro, but it´s nice to have modules as a subtree so it´s not a pain to mantain, and you can easily reuse it in other projects keeping it´s development in github as well.

  • Fork DrLunesTypeManager
  • Ad it as a subtree in git with relative path site/modules/
  • Edit it as you like.
  • Install DrLunesTypeManager with modules administrator in PW.
  • Open it and configure it with your settings.

Using DrLunesTypeManager in templates.

Last thing is to output code, this can be done in your: $config->appendTemplateFile

  • DrLunesTypeManager uses jQuery.

So output code AFTER jQuery is loaded, usually in your head, but preferably before body tag.


// Get Module
$typekit = $modules->get('DrLunesTypeManager');
// Render Script & Settings.
echo $typekit->render();
// It´s done.

html outout

MODULE-VALUE-* represents your value settings in Module´s Settings

  WebFontConfig = {
    typekit: { id: "MODULE-VALUE-TYPEKIT-ID" },
    google: {
        families: ["MODULE-VALUE-GOOGLE-FONT"]
  (function() {
      var wf = document.createElement("script");
      wf.src = ("https:" == document.location.protocol ? "https" : "http") + ":MODULE-VALUE-TYPEKIT-CDN";
      wf.async = "true";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(wf, s);

	// TypeKit Classes added to main text tags

  (function($) {
    $("h1, h2, h3").addClass("MODULE-VALUE-H13-CLASS")
    $("h4, h5, h6").addClass("MODULE-VALUE-H46-CLASS")


If you are using the Custom CSS field, you may add !important in order to get this styles loaded as expected:

h1.tk-cubano {
  letter-spacing: -1px;
  color: hsla(360, 94%, 32%, 0.76) !important; // FORCE RED
  text-shadow: 1px 1px 3px hsla(360, 94%, 32%, 0.3); //SHADOW

With love.


Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • ProcessWire 3.0.192 (dev branch) contains 11 issue fixes and 5 pull requests, over 20 commits— More
    7 January 2022
  • ProcessWire 3.0.191 core updates: updates to the installer and the profile exporter module— More
    24 December 2021
  • This week ProcessWire went on a diet, trimming the core size from 15.5 MB down to 7.5 MB by moving optional site profiles into their own GitHub repos— More
    17 December 2021

Latest news

  • ProcessWire Weekly #401
    In the 401st issue of ProcessWire Weekly we'll cover the latest core updates, check out a brand new module called Lister Native Date Format, and more. Read on!
    Weekly.pw / 15 January 2022
  • ProcessWire 3.0.190 core updates
    ProcessWire 3.0.190 has 15 commits relative to 3.0.189 and contains a mixture of issue resolutions and feature additions. This post covers them all, in addition to updates for the PageAutosave and ProFields Table modules.
    Blog / 3 December 2021
  • Subscribe to weekly ProcessWire news

“To Drupal, or to ProcessWire? The million dollar choice. We decided to make an early switch to PW. And in retrospect, ProcessWire was probably the best decision we made. Thanks are due to ProcessWire and the amazing system and set of modules that are in place.” —Unni Krishnan, Founder of PigtailPundits