JSFiddle - React, Tailwind, and code Playground

HTML

<div id="font-info">
	<h4>The follow fonts are used in this stack:</h4>

	<p class="h1">h1:</p>
	<p class="h2">h2:</p>
	<p class="body">body:</p>
</div>

<div class="stack-1">
	<h1 data-style="myfont">Heading 1</h1>
	<h2 data-style="myfont">Heading two here</h2>
	<p data-style="myfont">Hello world!</p>
</div>

<div class="stack-2">
	<h1 data-style="myfont">Heading 1</h1>
	<h2 data-style="myfont">Heading two here</h2>
	<p data-style="myfont">Hello world!</p>
</div>

CSS

body{
padding-top:220px;
}

div[class*="stack-"]{
    background: #232323;
    color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
#font-info{
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: auto;
		background: #e3e3e3;
		padding: 20px;
	}

JavaScript

var fontInfo = null;

function letsGetThisFont(){
    var fontInfo = $.map($("h1,h2,p").attr("data","style"), function (el, i) {
         return $(el).text();
    });
	joined = fontInfo.join(" ");
    
    return joined;
}

$(".stack-1").hover(function(){
    console.log(letsGetThisFont());
});