Upload an Adobe Font to use in a Timeline plugin

[Abigail_Greenwood]

Hi,

I have the Timeline widget and I’d like to have the headings be in the font Alfarn which is from the Adobe family. Does anyone know how I can do this using CSS as it’s not a Google font.

I’m also keen for the text down the left hand side to be bigger if possible please.

Thank you,

[Max]

Hi there, @Abigail_Greenwood and welcome aboard

To change the size of the marker title and label, please use this code in the Custom CSS field on the Settings tab:

.es-marker-label-title {
  font-size: 18px
}

.es-marker-label-text {
  font-size: 15px
}

As for changing the font of the event titles, the CSS code you’re using is correct:

.es-event-card-content-title {
  font-family: alfarn-yb7cgf, sans-serif;
  font-style: normal;
  font-weight: 700;
}

Do I get it right that it’s still not working on your website? If yes, please:

• check if you’ve added a correct font name (it should match the name of the Adobe font uploaded to your website)

• if it doesn’t help, please try adding !important right after the font name

Please try it out and let me know if it helped

[Abigail_Greenwood]

Thanks very much, that worked!

[Max]

Great, you’re very welcome!

Feel free to contact us again in case of any other questions. We’ll be more than happy to help

[Abigail_Greenwood]

Thanks so much for all your help, Max. I really appreciate it. I just have a couple of questions.

Firstly, how can I match the font in the pop-out to the font I’ve got as the body font on the cards?

And I have updated the look of my buttons, but it’s giving me a highlight when I hover over them which I don’t want, do you know how I remove that please?

Thank you again.

I’ve attached a few screenshots and droped all my code in here:

.es-event-card-content-title {
  font-family: alfarn-yb7cgf, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
}

.es-marker-label-title {
  font-family: alfarn-yb7cgf, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.es-marker-label-text {
  font-size: 20px;
  margin-top: 10px;
  display: block;
}

.es-event-card-content-text {
  font-size: 20px;
}

.es-event-card-container {
  border-radius: 0px !important;
}

.es-event-card-content-wrapper {
  background-color: #EFEFEF;
}

.es-action-button {
  background-color: #8a8a8a !important;
  border: none !important;
  color: #ffffff !important;
  font-family: futura-pt, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 70px !important;
  padding: 0 20px !important;
  line-height: 1 !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

.es-event-card-content-text {
  line-height: 1.45 !important;
}

[Max]

Hi there, @Abigail_Greenwood

You can disable the button color change on hover using this CSS code:

.es-button-base-overlay:hover {
  background-color: transparent !important;
}

As for the text font in the popup, the code below will do the trick:

.global-styles,
[class*=“Popup__PopupInner-sc”] {
font-family: alfarn-yb7cgf, sans-serif!important;
}

Test it out and let me know how it worked

[Abigail_Greenwood]

@Max

.global-styles,
[class*=“Popup__PopupInner-sc”] {
font-family: alfarn-yb7cgf, sans-serif!important;
}

Thanks so much!

The hover button code worked, but not the popup font sadly,

The pop up font is also the body font of my website, which is futura pt - Do I need to just slot in those details? Thanks!

[Max]

Hi there, @Abigail_Greenwood

Yep, you just need to add a required font to the font-family line:

If it still doesn’t work, please send me a link to the page, where your widget is installed. I’ll be happy to check things

[Abigail_Greenwood]

Thank you! I’ve dropped you a message.

[Max]

Thanks! I’ve added this CSS code to your widget instead:

.es-event-card-content-wrapper {
font-family: futura-pt-aqgbrk!important;
}

Please check it out and let me know if you like the result

[Abigail_Greenwood]

Hey Max, that’s perfect thank you!

The only remaining issue I’m having is the hover keeps appearing on the buttons. It’s a little random and doesn’t appear on the first hover, but it’s almost as if it’s when your mouse leaves the button. Would you mind letting me know what I can do to stop this?

Thank you!

[Max]

Hi there, @Abigail_Greenwood

I’ve added one more CSS code to your widget:

.es-button-base-overlay {
  background-color: transparent !important;
}

Please check it out and let me know if everything is fine