How to use 2 different (Adobe) Fonts in 1 Sentence?

Bianca_Chubb

I’m trying to use 2 different Adobe Fonts together in 1 sentence - is this possible?

I’m using this documentation to get my adobe fonts added to the web project https://documentation.unbounce.com/hc/en-us/articles/360021332312-Using-Adobe-Fonts-on-Your-Landing-Page

I’ve set them up as h1 and h2, and was hoping to be able to set a sentence as h1 but with 1 word as h2, but the whole sentence became h2.

Is there a way to do this other than having multiple different text boxes?

5 replies

jboyski

Hi Bianca,

Not necessarily the most elegant solution but you could wrap the string inline in the text with it’s own class using <span.<.span>

i.e.

If in this string

<h1>This is a test string</h1>

Let’s say you wanted to make only the word “test” red. You could wrap in with span and give that specific word either a class or id, for example, class=“red-text”

<h1>This is a  <span class="red-text">test</span>  string</h1>

Then in the stylesheet use this class selector to style it:

<style> .h2 { color: red; } </style>

A few things to note.

The reason this isn’t the most elegant is although you could give it the h2 class you need to use the dot notation in the CSS to style this h2 class using this method, so you might potentially need a “h2”, and a “.h2”.

Also, in my testing, the output doesn’t show in the editor so you need to use the preview to test if it displays correctly.

I’m relatively new to CSS myself so someone else may be able to provide a better solution to this. but this might be a fallback.

Hope that helps

David_Kim

@jboyski got it right.
Rather than adding a <h2> element inside your <h1> element, use a span.

.red-text { color: red; }

For reference, it’s not a good idea to name your CSS classes as HTML elements like h1,h2, etc, but rather name them to their function/purpose. So, the class .red-text works because any element with that class will always be red.

Bianca_Chubb

Thanks so much for your reply.

I’ve tried this (but it doesn’t work - the whole sentence is still in h1 style)

Sign up to get access to the Club.

I’m aware it only works if you preview it so that’s not the issue!

Let me know how I can fix this

Bianca_Chubb

oops it coded that in I’m not sure how to avoid that

Sign up to get access to the Club .

David_Kim

It should look something like this.

<h1>Sign up to get access to the <span class="title">Club</span></h1>

<style>
  .title {
    font-family: 'Adobe Font family';
    color: 'red';  // keep this in, to see if your styles is actually being rendered.
  }
</style>

After you save, go to preview, and see if ‘Club’ is red. If it is red, then the CSS worked, and you can edit it however you want.

Let me know how that worked out!

Reply


Terms & ConditionsCookie settings