Fixing Font Size Conflict

<style>
@font-face {
	src: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2');
	font-family:'Compressa VF';
	font-style: normal;
}


.fit-container h1 {
	font-family:'Compressa VF';
	text-rendering: optimizeSpeed;
/*	width: 100%;*/
	user-select: none;
	line-height: 0.8em;
	margin: 0 auto;
	text-transform: uppercase;
	font-weight: 100;
	text-align: center;
/*	width: 100vw;*/
}
.fit-container h1 span {
	transform: translateY(-10px);
	user-select: none;
	font-family:'Compressa VF';

}
.fit-container h1.flex {
	display: flex;
	justify-content: space-between;
	
}
.fit-container h1.stroke span {
	position: relative;
	color: #211D26;
	line-height: inherit;
}
.fit-container h1.stroke span:after {
	content: attr(data-char);
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #FE6730;
	position: absolute;
	left: 0;
	line-height: inherit;
	color: transparent;
	z-index: -1;
}
</style>

<script>

</script>

<script>
var maxDist;
var mouse = { x: 0, y: 0 };
var cursor = {
    x: window.innerWidth,
    y: window.innerHeight
};

Math.dist = function(a, b) {
    var dx = b.x - a.x;
    var dy = b.y - a.y;
    return Math.sqrt(dx * dx + dy * dy);
}

window.addEventListener("mousemove", function(e) {
    cursor.x = e.clientX;
    cursor.y = e.clientY;
});

window.addEventListener("touchmove", function(e) {
    var t = e.touches[0];
    cursor.x = t.clientX;
    cursor.y = t.clientY;
}, {
    passive: false
});

var Char = function(container, char) {
    var span = document.createElement("span");
    span.setAttribute('data-char', char);
    span.innerText = char;
    container.appendChild(span);
    this.getDist = function() {
        this.pos = span.getBoundingClientRect();
        return Math.dist(mouse, {
            x: this.pos.x + (this.pos.width / 1.75),
            y: this.pos.y
        });
    }
    this.getAttr = function(dist, min, max) {
        var wght = max - Math.abs((max * dist / maxDist));
        return Math.max(min, wght + min);
    }
    this.update = function(args) {
        var dist = this.getDist();
        this.wdth = args.wdth ? ~~this.getAttr(dist, 5, 200) : 100;
        this.wght = args.wght ? ~~this.getAttr(dist, 100, 800) : 400;
        this.alpha = args.alpha ? this.getAttr(dist, 0, 1).toFixed(2) : 1;
        this.ital = args.ital ? this.getAttr(dist, 0, 1).toFixed(2) : 0;
        this.draw();
    }
    this.draw = function() {
        var style = "";
        style += "opacity: " + this.alpha + ";";
        style += "font-variation-settings: 'wght' " + this.wght + ", 'wdth' " + this.wdth + ", 'ital' " + this.ital + ";";
        span.style = style;
    }
    return this;
}

var VFont = function(element) {
    this.scale = false;
    this.flex = true;
    this.alpha = false;
    this.stroke = false;
    this.width = true;
    this.weight = true;
    this.italic = true;
    var title = element;
    var str = title.innerText;
   
    var chars = [];

    this.init = function() {
        title.innerHTML = "";
        for (var i = 0; i < str.length; i++) {
            var _char = new Char(title, str[i]);
            chars.push(_char);
        }
        this.set();
        window.addEventListener("resize", this.setSize.bind(this));
    }

    this.set = function() {
        title.className += this.flex ? " flex title variable-font-content " : "";
        title.className += this.stroke ? " stroke" : "";
        this.setSize();
    }

    this.setSize = function() {
        var mainDiv = title.parentElement;
       
       // var fontSize = mainDiv.clientWidth / (str.length / 2);
         var fontSize = "<?php echo $font_size ?>";
        title.style.fontSize = fontSize;
        if (this.scale) {
            var scaleY = (window.innerHeight / title.getBoundingClientRect().height).toFixed(2);
            var lineHeight = scaleY * 0.8;
            title.style.transform = "scale(1," + scaleY + ")";
            title.style.lineHeight = lineHeight + "em";
        }
    }

    this.animate = function() {
        mouse.x += (cursor.x - mouse.x) / 20;
        mouse.y += (cursor.y - mouse.y) / 20;
        requestAnimationFrame(this.animate.bind(this));
        this.render();
    }

    this.render = function() {
        maxDist = title.getBoundingClientRect().width / 2;
        for (var i = 0; i < chars.length; i++) {
            chars[i].update({
                wght: this.weight,
                wdth: this.width,
                ital: this.italic,
                alpha: this.alpha
            });
        }
    }

    this.init();
    return this;
}

// Initialize for all elements with class "title"
var titles = document.querySelectorAll(".title");
var fontObjects = [];
titles.forEach(function(el) {
    var txt = new VFont(el);
    fontObjects.push(txt);
});

// Unified animation loop for all
function animateAll() {
    mouse.x += (cursor.x - mouse.x) / 20;
    mouse.y += (cursor.y - mouse.y) / 20;
    requestAnimationFrame(animateAll);
    fontObjects.forEach(function(font) {
        font.render();
    });
}
animateAll();
</script>

var fontSize = "<?php echo $font_size ?>";

$unique_id = 'effect-text-' . sprintf('%02d', $this->get_id()) . '-page-' . $current_page_id;
$font_size = $settings['text_typography_font_size']['size'] . $settings['text_typography_font_size']['unit'];

$output = "<div id='fit' class='$unique_id fit-container' data-page-id='$current_page_id' data-font-size='{$font_size}'>";
$output .= "<h1 class='$unique_id title variable-font-content'>$text</h1>";
$output .= "</div>";

titles.forEach(function(el) {
    var txt = new VFont(el);
    fontObjects.push(txt);

    // Set unique font size per element
    var parent = el.closest('.fit-container');
    if (parent && parent.dataset.fontSize) {
        el.style.fontSize = parent.dataset.fontSize;
    }
});