Change Font of TabbyTitle

The CSS included with tabby responsive tabs does not include rules for the font used, instead the fonts are inherited from the default font used in the current theme. This is made to ensure that the tabs fit in current theme.

This can be changed by adding a rule to your child theme’s stylesheet or via a custom CSS plugin.

To just change the font on the tab titles to trebuchet you can use:

.responsive-tabs-wrapper .responsive-tabs .responsive-tabs__list__item {
	font-family: "Trebuchet MS"!important;
}

The !important declaration is not normally necessary, but seems to be needed on your site as there appears to be CSS rules in your theme which would otherwise override this.

Thank you. I had presumed the font would be inherited from the default theme font, but if you take a look at the site, that font does not appear anywhere else. The default font is something completely different. Weird.

Could you maybe provide a screenshot or more information about where exactly I am supposed to paste that code?

Thanks

The font appears to be inherited from this block CSS which is output within each page on your site rather than from a separate stylesheet:

DIV DIV DIV.content-wrapper.clearfix UL LI {
font-size: px !important;
top: -9px !important;
left: -2px !important;
position: relative !important;
font-family:'SansationLight' !important;}
DIV DIV DIV.responsive-tabs.responsive-tabs--enabled UL.responsive-tabs__list LI#tablist1-tab1.responsive-tabs__list__item.ui-draggable.responsive-tabs__list__item--active {
color: #000000 !important;
font-family:'AllerRg' !important;}

which you can see if you view the page source.

This is also making changes to the tab title metrics making them float above the tab content.

If you can track down where that is added you can make the required changes there.

It appears that the cause of the problem was that buggy Font plugin. I deactivated it and the font of the Tabby Titles immediately changed.

However, I am still unable to now change them to Trebuchtet MS ??

It looks like your theme does not have a specific font defined as the default – which is unusual.

Now you’ve removed the fonts plugin, the rule you will need to add is a little simpler.

The CSS you now need to add is:

.responsive-tabs-wrapper .responsive-tabs__list__item {
	font-family: "Trebuchet MS";
}

It looks like you are using the jetpack plugin, so the easiest way to add this rule would be by using the custom CSS module included in Jetpack.

Phew, it works!

Cubecolour is a WP Master!!!!

Ha Ha! thank you