How to get a custom field in theme customizer to live update the element in preview window?

I have defined a solution. The transport type had to be changed from default refresh to postMessage to use the custom JS instruction.

add_action('customize_register', function($mgr) 
{
  //load the custom field class file
  include_once LIBPATH.'/classTplFormat.php';

  // moved the JS into a file and loaded via enqueue
  // ASSETURL is a constant that holds theurl to the assets folder
  add_action('customize_preview_init', function() {
    wp_enqueue_script('tpl-customizer', ASSETURL.'/tpl-customizer.js',[],'',true);
  });

  // the fields are in the custom class and too much to post but it follows
  // similar method as the core customizer eg: add_panel(), add_section(), add_setting()
  $mgr->add_control(new TplFormat($mgr, 'tplformat',[]));
  //set the transport method to the specific field
  $mgr->get_setting('head1font')->transport="postMessage";
});

JS

(function($) {
    "use strict";
    wp.customize("head1font", function(value) {
        value.bind(function(value) {
            $("h1.pagetitle").css("font-family",value);
        });
    });
})(jQuery);