[Resolved] Need some help with system fonts

[Swadhin]

Hi there,
1) I am wanting to install system fonts on my website, had custom fonts set up so am confused how to go back.

I found the option of inherit, system stack which should I select to completely stop Google fonts from loading?

Actually, I want to the whole typography to be similar to this site https://nogluten.io/food-matters/ including header H3, H3 etc tag typography and line height, para height also. He uses something called Sergiu font. Please tell me how can I achieve that.

2) I want the spacing option of this theme https://woorkup.com/kinsta-affiliate-program/. (I mean the pixel width of content and sidebars thing). I tried achieving that using a screenshot tool but still my site doesn’t reach that exact pixel.

3) How to have the shadow to the menu bar and submenu items like we see here on this site https://neilpatel.com/blog/algorithm-seo-updates/

P.S. I guess this might not be a theme functionality (I don’t know if it is) but can you say how to achieve that translate options beside the logo of this site https://neilpatel.com/blog/algorithm-seo-updates/

Thanks.

Best regards,
-Swadhin

[Tom]

Hi there,

1. I believe Brian just uses the System Stack option in our typography settings. You can right click elements and click “Inspect” in Chrome to find out what the specific line heights are etc..

2. That site is using our standard sidebar sizing using percentages. The sidebar is set to 30% which you can do in Customize > Layout > Sidebars.

3. That website is using this CSS:

.main-navigation ul ul {
    -webkit-box-shadow: 0 20px 29px 0 rgba(207,67,20,.5);
    box-shadow: 0 20px 29px 0 rgba(207,67,20,.5);
}

4. They’re likely using some sort of multilingual plugin for this – maybe WPML or Polylang?

Hope this helps 🙂

[Swadhin]

Hi Tom,

Thank you so much. Everything worked. I even went forward and added the code snippet to animate menu and it worked wonders. Thank you so much.

One thing that didn’t work, though, is the shadow for the total menu bar even as it scrolls down. Did I miss something? 🙂

P.S. How do I add the same menu animation (like this https://docs.generatepress.com/article/adding-menu-hover-animation/)to footer links.

Thanks so much for all the support. I am truly enjoying the Generatepress community. 🙂

[Tom]

Any chance you can link me to your site so I can see why the shadow isn’t working correctly?

[Swadhin]

Yes sure. I have linked the site in the website link section and I’d be glad if you could take a look into that.

[Tom]

I’m not seeing any navigation shadow, what CSS did you use?

I’m also not seeing any footer links – can you add them in?

Thanks!

[Swadhin]

Hi Tom,

I used the CSS you provided me:

.main-navigation ul ul {
    -webkit-box-shadow: 0 20px 29px 0 rgba(207,67,20,.5);
    box-shadow: 0 20px 29px 0 rgba(207,67,20,.5);
}

It did add a shadow on the submenu (If you over on the first menu item to open the dropdown) but not on the whole navigation bar.

Thanks.

[Tom]

That CSS will apply to the entire sub-menu box, which is does.

Are you wanting a shadow for the entire navigation bar?

[Swadhin]

Yes Tom, I wanted that. 🙂

Would appreciate if you can please help me 🙂

[Tom]

Give this a shot:

.main-navigation {
    -webkit-box-shadow: 0 20px 29px 0 rgba(207,67,20,.5);
    box-shadow: 0 20px 29px 0 rgba(207,67,20,.5);
}

[Swadhin]

Thanks a ton Tom. It worked. 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts