Scale font-size to always fit within container?

[voidpain]

hi! 1rst post here and im asking for help.. typical.

The connundrum: i want to have text within a title card that will change on every page. I figured sorting out a way to have the text scale in size to always fit within the container would save me from having to manually set the font-size on every page.

You can kinda preview what ive already got set up here; https://voidpain.neocities.org/src. the exasperated "broooooooo" would ideally fit most of the horizontal space marked by the bg img behind it. Even when O's are removed or added, the text would shrink or grow accordingly to compensate and still take up most of the space provided.

Ive found some solutions online that demonstrate what i mean; namely this demo of textFit.js (https://codepen.io/chriscoyier/pen/GGQKJE) which ive tried implementing in my code with no luck.

Having failed to get textFit to work, i also found this snippet :

Code

const input = document.querySelector('input');
const output = document.querySelector('.output');
const outputContainer = document.querySelector('.container');

function resize_to_fit() {
  let fontSize = window.getComputedStyle(output).fontSize;
  output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
  
  if(output.clientHeight >= outputContainer.clientHeight){
    resize_to_fit();
  }
}

function processInput() { 
  output.innerHTML =this.value;
  output.style.fontSize = '100px'; // Default font size
  resize_to_fit();
}

input.addEventListener('input', processInput);

It also resizes the text the way i imagine, but relies on user input to get the text in the first place and i dont want that lol. I dont know enough about javascript to rewrite the code to resize the inner html without all those bells and whistles so any help with that, or pointers as to any other ways i could achieve this would be appreciated.

Thanks melonland :]!