Style a CMS populated heading with Span so I can use 2 fonts?

I’m currently working a project that has a large recipe database, the client wants the recipe title that’s populated from the CMS Item styled with two fonts. Has anyone figured out a way to do this or use a span with dynamic content so that the first two words in this case could be styled differently?
Image 28-01-2022 at 13.46

Here is a code example;

var h1 = document.getElementsByTagName('h1')[0];
var h1Text = h1.innerHTML;
var h1TextSplit = h1Text.split(' ');
var h1TextSplitFirstTwo = h1TextSplit.slice(0, 2);
var h1TextSplitFirstTwoJoined = h1TextSplitFirstTwo.join(' ');
var h1TextSplitFirstTwoJoinedSpan = document.createElement('span');
h1TextSplitFirstTwoJoinedSpan.innerHTML = h1TextSplitFirstTwoJoined + " ";
h1.innerHTML = h1TextSplitFirstTwoJoinedSpan.outerHTML + h1TextSplit.slice(2).join(' ');

Then you could style the span with some CSS.

h1 > span {color:green}
2 Likes

@webdev solution here works great in situations like this.

One another solution which I guess you’ve already considered is to create two separate fields for them? And then you can easily place and style them separately.

As you mentioned you have a large database, so ya updating all those data would be a time consuming work. So ya simple work is not always better.

But I just wanted to mention about this, because in some situations this can be useful.

Nice, thank a bunch!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.