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

Design help CMS
1

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

So UPDATE I just had to create a Span around text in a CMS for various fields and the client needed to be able to manage the spans, anyhow, did that with some custom code and a marker the client can use in the CMS (just%%) to indicate where the Span should wrap text. Did a little post on it here in case someone needs to replicate it. Creating Text Spans in Dynamic CMS Text Elements in Webflow

2

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
3

@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.

4

Nice, thank a bunch!

5

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