Font updates showing in Pro but not on frontend

I’m trying to change the font in a number of elements on our site. In the Pro editor, I’ve got the right font selected and everything displays correctly when editing in Pro. However, it’s not displaying correctly on the front end everywhere I’ve changed it.

It’s showing correctly on the top nav bar and some headings, but not on the cards, testimonial slider, and other blocks. For some reason the links in the footer are also showing as blue, whereas our theme setting is to have them green.

The X is showing on browser. The check marked is showing in Pro editor.

It seems like it’s defaulting to something else. I’ve cleared the cache, done everything I can think of.

Please help!!

Hi Bryn,

Thanks for writing to us.

For the footer links, it seems that you are using the Content element to display the links to change the colour of the links you need to add a custom class in the Content element and override the style of the links.

I checked the site and I noticed that you added Headline element, it seems that the H1 tag is blank and you have added another H1 tag , in the new H1 tag you have added span tag it might be because of that your font-family is not working.

In order to help you further, please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

Thanks!

Is it recommended to do something different in the footer links to avoid needing to add the customer class?

How is it recommended to fix the H1 tag?

Hello Bryn Jones,

The given credentials do not work for us.
Please double-check it so we can log in.

Thanks.

Sorry about that. Check secure note again.

Hi Bryn,

The reason why your font is not showing properly on the front-end because on how you set up the header tag, if you follow the instructions below on how to fix the header tags correctly it will also fix the font of your text.

Regarding on how to fix the header tag correctly, first you need to remove the uncessarry HTML from your text editor:

For example your code below, you should remove the h1 and span HTML elements and just leave the word “Innovating”.
<h1><span style="color: #ffffff;">Innovating</span></h1>

Then to make the word h1 you need to set it here:

And to style the text, you need to go to Text Format Section

On the other hand, in the footer part. The reason why the footer links is showing blue color not green is because of the automotive plugin you installed. The said plugin has a bootstrap CSS that overrides the default CSS you set in the settings.

Hope that helps.

Thank you.

Awesome, that helps a lot. The font in the testimonial slider on homepage are also being affected. How do I fix that?

How do I go about fixing the bootstrap CSS that’s causing the override? We don’t want it doing that.

I’m needing to link the text in the cards on the homepage to other pages, and they’re now showing the blue. I want them white on front & when hovered/back. However, the text in the Resources section on the homepage isn’t doing the blue thing, so…

Hi Bryn,

To override the bootstrap CSS, we need to add a little CSS code. Please add this code to your Pro > Theme Options > CSS.

.x-colophon a {
  color: rgb(139,200,50);
}
.x-colophon a:hover {
  color: #58585a;
}

On the other hand, can you explain more about the cards. I am not quite sure that I understand what do you want on your cards.

Please note that providing custom CSS is outside the scope of our support. Issues that might arise from the use of custom CSS and further enhancements should be directed to a third party developer.

Hope that helps.

Thank you.

Thank you.

On the cards, I want the text to always be white - regardless of whether the card is hovered or not. Right now it’s either showing blue, grey #58585A, or green #8cc63e. The grey and green are what has been set in the Pro Theme settings for links/hovering. But in this case, although the text is linked, I want it white.

Hi Bryn,

To make the front and back card link white. I suggest that you add a class name to the <a> tag on both front and back content, please see an example below.

In the example code above, I added a class name “card-white-text”, then to make it white on default and hover, please add this code in Pro > Theme Options > CSS.

.card-white-text, .card-white-text:hover {
      color: #ffffff !important;
}

Please note that providing custom CSS is outside the scope of our support. Issues that might arise from the use of custom CSS and further enhancements should be directed to a third party developer.

Hope that helps.

Thank you.

Great thank you, fixed those.

The last issue with the font is the testimonial slider on the homepage. It’s defaulting to a different text. I don’t see a way to change this in the testimonial section so is there CSS that should be added to fix this too?

Would be glad if you could explain why the the default font set in Pro Theme Settings is being overridden.

Hi Bryn,

Take a look at the screenshot. As my colleague, @cramaton told Automotive plugin’s CSS code overwrites the Pro theme’s CSS.

Add this code in theme option’s CSS to change the font family of testimonial slider and as you used a third party plugin to show testimonial, CSS code required to change the font family.

For paragraph
#ttshowcase_0 .ttshowcase_rl_quote p{font-family:inherit;}
and this one for Title and suntitle
#ttshowcase_0 .ttshowcase_rl_title.reviewer,#ttshowcase_0 .ttshowcase_rl_subtitle{font-family:inherit;}

Feel free to change the font family with the required one.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

Good thank you.

I’ve checked everywhere on the forum and through the options for a text and/or image slider element within Pro. We’re having to use 3rd party plugins for things like this, when something as developed as Pro should likely have its own slider element. Is a text or image slider not an option with Pro?

Hi Bryn,

Regretfully, we don’t have a slider element in our Pro Theme but we have some recommended slider plugin which are Revolution Slider and Layer Slider that is bundled with our theme. You can install those plugin and create a stunning sliders in your website.

Hope that helps.

Thank you.

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