[tonisaneca]

This reply has been marked as private.

[tonisaneca]

This reply has been marked as private.

[tonisaneca]

Edit: Sorry, wrong topic! 😀

[tonisaneca]

Exactly what I was looking for. Thank Kyle! I appreciate it.

[tonisaneca]

I appreciate the help, Kyle, but there’s not much to look into. It’s a very simple problem.
I just installed the theme, imported the demo content, and have just begun to change the fonts.
I installed a couple of fonts, including Proxima Nova, and Avenir Next LT Pro.

All I want is to use a different font for the various parts of the mega menu. (see attached)

The problem is, the custom fonts I uploaded aren’t reflecting on the page (and they’re substituting for a regular sans-serif font).

The only custom CSS I have is the following:

#main-navigation li {
text-transform: uppercase;
}

nav .menu ul.sub-menu li.menu-item > a, nav .menu ul.sub-menu li > span, nav.std-menu ul.sub-menu {
text-transform: capitalize !important;
}

li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > span.title {
    font-family: 'ProximaNova-Reg', Helvetica, sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    text-transform: uppercase !important;;
}
li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > ul.sub-menu .sf-std-menu {
  font-family: 'avenirnextregular', serif;
}

It’s an inconvenience to have to manually edit different headings on the site. It’s difficult because of course, I wasn’t the one to code it so I don’t know which text is which.

I haven’t gotten to the Product pages yet but I imagine it’ll also take me a while to do because of the various typography elements my client wants me to edit. (breadcrumbs, price, product name, product tags)

Atelier is a powerful theme, but in other themes I’ve purchased (Maya, Salient), they provide more elaborate options for typography. If you could release an update in the hopefully near future, I’m sure it will be very helpful for all your customers.

It would be very helpful if you could get back to me ASAP with a solution as I have been stuck on this for the past 2 days.

Attachments:

You must be logged in to view attached files.

[tonisaneca]

Hi Kyle,

Thing is, I already loaded it as a custom font but it isn’t reflecting on the page. Is it not already loaded on the page?
Again, this code works fine when I choose a Google font for my mega menu fonts but not when I use the custom fonts I uploaded.

#main-navigation li {text-transform: uppercase;}

nav .menu ul.sub-menu li.menu-item > a, nav .menu ul.sub-menu li > span, nav.std-menu ul.sub-menu {
text-transform: capitalize !important;
}

li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > span.title {
    font-family: 'ProximaNova-Reg', Helvetica, sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    text-transform: uppercase !important;;
}
li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > ul.sub-menu .sf-std-menu {
  font-family: 'avenirnextregular', serif;
}

Attachments:

You must be logged in to view attached files.

[tonisaneca]

Hi again,

The code works, but only when I use Google fonts. Do you have any idea why my Proxima Nova font (which I installed in the Font Options) code isn’t working? 🙁

[tonisaneca]

Edit: It works! The changes just took a while to reflect. Thanks! 🙂
Edit 2: It only works when I use a Google font. How do I use reference a font I uploaded?
Is it just the same as the regular CSS?

Example:

font-family: 'ProximaNova-Reg', sans-serif;

[tonisaneca]

Hi Rui,

Actually, the problem remains. I just included the custom CSS I had in case it helps any of your Support team with helping me out 🙂

[tonisaneca]

This reply has been marked as private.

[tonisaneca]

Hi Kyle!

Yup, but I’d like to apply those font styles only to the mega menu and not to the rest of the h1-h6 elements on the page. The font options also only has 1 font choice for the menu.

[tonisaneca]

Thanks for that, Mohammad! One more thing, I’d like to use Font A for my main menu font, Font B for the Sub Menu heading, and Font C for the Sub Menu Buttons. If you could tell me which specific css I should add my font styles to, that’d be great. Thank you!