Font styling in Modern Events Calendar

Support
#1

The Modern Events Calendar doesn’t seem to pick up the proper styles from the rest of the template.

A couple of examples: I added an unordered list in the event description, and it appears in a different font than the rest of the body style. (It’s in the default Montserrat font, whereas my body is in Lato per both the Pro theme setup and the MEC Settings page.)

The headings on both the event list and the event single page do not use Poppins, which, again is what I’ve specified in both the Pro theme settings and the MEC Settings page.

I’ve tried adding custom CSS via the MEC plugin, but I can’t seem to get the selectors right.

Am I doing something wrong, or does this plugin just not “play well” with the Pro theme? And, if it’s just me, can you help me find the right selectors?

#2

Hello Dannette,

Thanks for writing in! Regretfully we cannot check your pages because it asked us for a password.

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Cheers.

#3

Sorry! I will update the Secure Note.

#4

Hey Dannette,

The heading on the event list is using Poppins font family. This is working because the Poppins font is loaded on the event list page which you have built using Pro Content Builder with the Poppins font added using the Font Manager.

For the Poppins font to work on your single event page, it must also be loaded there. The way to load it there is to use the font in one of the places so that it will be loaded globally and so you can use the font anywhere with CSS.

  • Theme Options
  • Header
  • Footer

I checked the browser’s dev tool and your CSS is working. The Poppins font just needs to be loaded.

Hope that helps.

#5

Thank you! I got the heading font issue taken care of by enable the Font Manager in the Theme Options. I had done so in the “Settings” (accessed via the cog icon) but not in Theme Options itself!

I still have one issue with the single event page, however, The main paragraph copy is in the correct font (Lato) but not the correct weight. (It’s not picking up the normal body copy styles). And the unordered list within the body is picking something totally different. Any idea why or how to fix this?

#6

Hi Dannette,

Yes, we can access those setting using the Cog icon.

Your BODY FONT WEIGHT is 400 as set on Theme Options here:

MEC set it to 300 font weight.
I can see you have this custom CSS on MEC Settings > Custom CSS:

.mec-wrap .mec-event-content .mec-single-event-description .mec-events-content .p {
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 400;
}

That is not working because the selector is wrong.
Try this instead:

.mec-event-content p, .mec-wrap p {
    font-family: Lato, sans-serif;
    font-size: 16.8 px;
    font-weight: 400;
}

The following might help you in getting correct selector:

#7

Thank you! That mostly did the trick. For some reason, the font-size wouldn’t change even using that correct selector (and trying !important) but I actually decided I like the size the way it is and changed the rest of the site to match it.

#8

Hi Dannette,

There is a typo on your custom CSS, an extra space between 16.8 and px, as you can see on the screenshot below the browser is striking it out so it does not work. Please correct it.


Cheers!

#9

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