Solved Templates

Add custom font to main menu

Asked by Ola 3 years ago Last activity 3 years ago

Hi!

I use Helix Ultimate template.

I need to use custom fonts for styling. It works fine for the headings.

For example.
h1 {
color: #DD0B2F !important;
font-family : "Futura BdCn BT" !important;
font-size: 36px;
text-transform: uppercase !important;
font-weight: Bold
}

Name of custom font is - Futura BdCn BT

But how can I style the main menu with the same font? I tried with .nav but doesn't work.

Kind regards
Ola

Accepted answer

Marked as the solution
Ola Asked this
3 years ago

Thanks Paul and Pavel!

Your support is amazing!

Been trying to solve this for many days.

Works now.
Ola

2 more replies

Oldest first Newest first Most helpful
Pavel
3 years ago · edited

Hi. Here is

.sp-megamenu-parent a, .sp-megamenu-parent span {
    font-family: "Futura BdCn BT", sans-serif;
}

Do not use !important since you will break Font Awesome icons inside menu items

Paul Frankowski Senior Staff
3 years ago

Thx Pavel, indeed, all is true.

Ola, I would use a little bit longer version, that include submenu items as well:

.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: "Futura BdCn BT", sans-serif;
}

Extra tip for the future days, use Code Inspector from your browser to preview class names!

Log in to reply.