Change the font on an individual page with custom code

Site URL: https://www.janedoenomore.org/

I would like to add the Adobe font 'Relation' to certain key words/phrases on our website. 

I added the font 'relation.otf' to Custom CSS (screenshot below)

Adobe provided the code below:

font-family: relation-two, sans-serif;
font-weight: 400;
font-style: normal;

'Survivor-led Programs' pictured below is an image on the homepage. I would like to make it html and use it only occasionally throughout the site.

Thank you in advance.

@CassAggett

Thank you so much, this worked perfectly! I greatl appreciate your help! 🙂

I ran into an issue when I changed the type in the footer to the Relation font.

This screenshot shows the logo at the top and the type properly, The blue box on the left is a code block for constant constant sign up.

Below is how the footer appears once I save it. There is a huge gap of space between the logo and the words Empowering Survivors which is in the Relation font.

It appears fine on mobile. Help is greatly appreciated. Thank you in advance.

1 hour ago, DonnaP said:

I ran into an issue when I changed the type in the footer to the Relation font.

This screenshot shows the logo at the top and the type properly, The blue box on the left is a code block for constant constant sign up.

Below is how the footer appears once I save it. There is a huge gap of space between the logo and the words Empowering Survivors which is in the Relation font.

It appears fine on mobile. Help is greatly appreciated. Thank you in advance.

It looks to be a glitch with the email sign up code block - as you can see below with the browser inspect tool, the row you've got the code block in has stretched to fit it, rather than taking up multiple rows:

I don't think it's related to the font change, likely just coincidental timing.

In saying that, when you're in edit mode, try make the code block as long as it should be on the live site - maybe 6 or 7 rows - you can use the Contact Us text on the other side for reference. Theoretically it should then span the correct amount of rows and everything else will stay in place 😊

Wow, that did it! You are amazing, THANK YOU SO MUCH!