Docs

[newskywebsites]

Hi there,

I’m working on this site using the Essential Grid tool: http://newsite.benfranklincraftswi.com/explore-craft-store-departments/

I am using Google font Proza Libre 400 for my body font site wide and Google font Courgette 400 for headings. I’d like all instances of the Essential Grid to use the same fonts. How can I do that?

I’m not experienced in php so please give detailed instructions.

Using latest version of everything and child theme (renew stack).

Thanks!
Dawn

[Nabeel A]

Hi Dawn,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.esg-content.eg-depts-element-0 {
    font-family: "Courgette",handwriting !important;
    font-style: normal !important;
    font-weight: 400 !important;
}
.esg-content.eg-depts-element-6 {
    font-family: "Proza Libre",sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

Let us know how this goes!

[newskywebsites]

This is amazing, thank you very much! However, something odd happens… When I hover over the text on the live site, the font changes back to Trebuchet. See here: https://dl.dropboxusercontent.com/u/36509858/Recording%20%2311.mp4 Is there something I need to do inside of Essential Grid?

I tested in multiple browsers… same issue.

Thanks!
Dawn

[newskywebsites]

Also notice how tight the spacing gets please… both line spacing and letter kerning is super tight… THANKS!!

[newskywebsites]

Sorry, one more thing – that’s the “Excerpt” text that’s changing upon hover… 🙂

[Rue Nel]

Hello There,

Thanks for updating in! I can confirm that the issue occur. To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.esg-grid .esg-content.eg-depts-element-0,
.esg-grid .esg-content.eg-depts-element-0:hover {
    font-family: "Courgette", handwriting !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.esg-grid .esg-content.eg-depts-element-6,
.esg-grid .esg-content.eg-depts-element-6:hover {
    font-family: "Proza Libre", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 22px !important;
}

Hope this helps. Please let us know how it goes.

[newskywebsites]

Thank you!! That fixed the font issue, but there is still a background color popping up behind the text upon hovering over it. See here: https://dl.dropboxusercontent.com/u/36509858/Recording%20%2312.mp4

Is that fixable?

Thanks again!!
Dawn

[Christian]

Please add the code below in your Appearance > Customize > Custom > Global CSS

.eg-depts-element-6:hover {
    background-color: transparent;
}

Thanks.

[newskywebsites]

shoot, that didn’t help. 🙁 Do you still see it too? http://newsite.benfranklincraftswi.com/explore-craft-store-departments/

Thanks,
Dawn

[Nabeel A]

Hi again,

Try replacing the previous code with this one:

.eg-depts-element-6:hover {
    background-color: transparent !important;
}

Let us know how this goes!

[newskywebsites]

I’m sorry. Replaced the code with your latest and no luck after clearing cache. Do you have any other suggestions?

Thanks!
Dawn

[newskywebsites]

This reply has been marked as private.

[Rue Nel]

Hello Dawn,

Thank you for providing the login information. To save you some time, I went ahead and fixed the issue. I have updated the given code and added this code:

.esg-grid .esg-content.eg-depts-element-0,
.esg-grid .esg-content.eg-depts-element-0:hover {
    font-family: "Courgette", handwriting !important;
    font-style: normal !important;
    font-weight: 400 !important;
		background-color: transparent !important;  
}

.esg-grid .esg-content.eg-depts-element-6,
.esg-grid .esg-content.eg-depts-element-6:hover {
    font-family: "Proza Libre", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 22px !important;
    background-color: transparent !important;
}

If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[newskywebsites]

Outstanding! Thank you so much!
dawn

[Rahul]

You’re so much welcome!

Let us know if we can help with anything else.

Thank you.

[Author]

Posts