Slider Title & Sub Title - Different Fonts

Hi,

I would really like to have the slider title (realise this is H2) and subtitle in differing fonts but without changing the body font (it seems the slider subtitle is linked to the body font). I am not using Google Fonts I am using the plug-in Use Any Font to import the ones I need. Am trying to match our branding.

Is there any CSS that can help me out here?

Many thanks!
Lauren

In addition to the font issue, when using the desired font (experimented with it by changing the body font temporarily) I need to space out the letters and words in accordance with our branding.

I space it out in Customiser, Slider, in the sub-title area accordingly (there is one space between letters and two spaces between words):

So I need it to look like this -

e x t r a v i r g i n o l i v e o i l

But it looks like this -

e x t r a v i r g i n o l i v e o i l

It lets me put one space between the letters but doesn’t let me put two spaces between the words.

Anything I can do about this?

Thanks!

Haha ok right…when I pressed submit with my reply the two spaces between the words doesn’t work either. I might be fighting a losing battle here!

Would also like the site tagline to be the same font as the slider sub-title. So in summary:

  1. Slider sub-title & site tagline font change (same font required) - how to do this independently from body font?

  2. Slider sub-title - how to space out the letters so that I can have two spaces between words.

Thanks.

Hello Lauren,

Thank you for posting in.

> 1

Try to apply the following CSS code thro through the Simple Custom CSS plugin or child theme’s style.css

.text-slider .maintitle{
  font-family: "Open Sans",sans-serif;
}

.text-slider .subtitle {
  font-family: "Open Sans",sans-serif;
}

Adjust the values to your own as needed.

> 2

Try the following CSS code:

.text-slider .subtitle {
   letter-spacing: 5px;
}

Regards,
Kharis

Thank you! That worked a treat. Ended up using a google font for the body text that was a normal version of the italic one I needed for the slider subtitle. So after changing the body font in customisation, just had to change the CSS to this in order to specify that I wanted the sub-title in italic:

.text-slider .subtitle {
font-family: “Libre Baskerville”,serif;
font-style: italic
}

The spacing is perfect too - your help makes this whole process a lot of fun actually. Thanks again!
Cheers, Lauren.