Add font resizer

To add the font resizer on the single page of the website.

Add the below code in the scripts file for e.g script.js

jQuery(function ($) {
    // Storing the original size in a data attribute so size can be reset
    $affectedElements.each( function(){
      var $this = $(this);
      $this.data("orig-size", $this.css("font-size") );
    });

    $("#btn-increase").click(function(){
      changeFontSize(1);
    })

    $("#btn-decrease").click(function(){
      changeFontSize(-1);
    })

    $("#btn-orig").click(function(){

    $affectedElements.each( function(){
            var $this = $(this);
            $this.css( "font-size" , $this.data("orig-size") );
            $("#fontresizer *").removeAttr("style");
       });
    })

    function changeFontSize(direction){
        $affectedElements.each( function(){
            var $this = $(this);
            $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
        });
    }
});

Add the below HTML structure to the required template file and customize the styling as required

<div class="font-style-btn">
 <button id="btn-decrease">A -</button>
 <button id="btn-orig">A </button>
 <button id="btn-increase">A +</button>
</div>