Styling Headline Fonts in Custom JS/HTML

[bungeejumper2]

Hi all - I have a custom code to loop through several different quotes on my site, but would like for them to adopt the templates headline formatting, particularly so that the font-size is dynamic across devices (as per the rest of the elements in the template)

I've added the following custom js code to set up the loop, which works great (although maybe not the most elegant solution):

$(function () {
    var $header = $("#header");
    var header = ['Show Quote 1', 'Show Quote 2', 'Show Quote 3', 'Show Quote 4', 'Show Quote 5'];
    var position = -1;
    
	
    !function loop() {
	position = (position + 1) % header.length;
        $header.html(header[position])
        .fadeIn(1000)
        .delay(2500)
        .fadeOut(1000, loop);
    }();
 });

 and have embedded the following in a box on the site to display the quotes

<span style="color:#ffffff; font-size: 80px; line-height:100px; font-family: quicksand; ">
<div id="header">
</div>
</span>

Instead of using trying to style the span as above, I'd prefer to do it referencing the template styles so that they are dynamic with the rest of the site.

Thanks for your help!

[Adam7]

Try inspecting the code for standard headline text, @bungeejumper2. There should be a class used which you can also add to your custom code. Using the same class should make it use the same styling as standard headline elements.

[bungeejumper2]

Thanks @Adam. Do you know how I would then reference this class? Would it be in the embed code box or in the JS? I'm not very familiar with the syntax to refer to a class needed.

For context - I would like the looping text on this page to be styled like the "Title?" text on this page, including the dynamic styling for screen size.

Thanks!

[Adam7 · Accepted solution]

You've got it almost correct; try changing your embed code to this:

<h2 class="wsite-content-title">
<div id="header">
</div>
</h2>

You probably don't need the inner div unless it's necessary for your JS code. This would be a lot cleaner and should display correctly:

<h2 class="wsite-content-title" id="header"></h2>