(Share) Navigation Custom Font - 92 Templates

If you want to use custom font for Navigation, just copy - paste the following codes.

Add code to Home > Design > Custom CSS

• 92 Templates Navigation Link Color - Hover - Active Color

Avenue

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#topNav nav ul li a {
  font-family: your-font-name;
}

Aviator

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
nav#main-navigation ul li a {
  font-family: your-font-name;
}

 

Bedford Template Family

Include: Anya, Bedford, Bryant, Hayden, Bedford

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#mainNavigation div a {
  font-family: your-font-name;
}

 

Brine Template Family

Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.Header-nav-item {
  font-family: your-font-name;
}

 

Farro

Include: Farro, Haute

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.Header-nav-item {
  font-family: your-font-name;
}

Five

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
nav#main-navigation ul li a {
  font-family: your-font-name;
}

Flatiron

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
ul#nav li a {
  font-family: your-font-name;
}

Forte

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#topNav ul li a span {
  font-family: your-font-name;
}

Ishimoto

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#topNav #nav li a {
  font-family: your-font-name;
}

Momentum

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#topNav ul li a {
  font-family: your-font-name;
}

 

Montauk Template Family

Include: Julia, Kent, Montauk, OM

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#topNav ul li a {
  font-family: your-font-name;
}

Native

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#navBlock ul li a {
  font-family: your-font-name;
}

 

Pacific Template Family

Include:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#mainNavigation div a {
  font-family: your-font-name;
}

 

Skye Template Family

Include: Foundry, Indigo, Ready, Skye, Tudor

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.nav-blocks-wrapper div a span {
  font-family: your-font-name;
}

 

Tremont Template Family

Include: Camino, Carson, Henson, Tremont

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
#mainNavigation div a span {
  font-family: your-font-name;
}

Wells

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
div#topNav ul li a {
  font-family: your-font-name;
}

Wexley

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
div#topNav ul li a {
  font-family: your-font-name;
}

 

York Template Family

Include: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.site-navigation div a span {
  font-family: your-font-name;
}

 

Squarespace 7.1

Include: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.header-nav *, .header-menu-nav * {
    font-family: your-font-name;
}

Made by Tuan

Edited May 27, 2020 by tuanphan
update ss 7.1 class name

Hi. I am using Lusaka, and it did not work for me. Why could that be? I have used CSS to change the font of h1,h2, h3,h3 and p to Overpass, but Navigation still has the template font. I used the following code, but it didnt work.

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.Header-nav-item a {
  font-family: your-font-name;
}

55 minutes ago, paudub said:

Hi. I am using Lusaka, and it did not work for me. Why could that be? I have used CSS to change the font of h1,h2, h3,h3 and p to Overpass, but Navigation still has the template font. I used the following code, but it didnt work.

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.Header-nav-item a {
  font-family: your-font-name;
}

try font-family: your-font-name !important;

Hi! I'm using "Almar" and this does not work for me either, I have manged to change the fonts for H1 H2 & H3, but not the navigation or the Buttons.. 
 

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.Header-nav-item a {
  font-family: your-font-name;
}

On 1/7/2020 at 11:55 PM, tuanphan said:

Squarespace 7.1

Include: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.Header-nav-item a {
  font-family: your-font-name;
}

Made by Tuan

Hi, I have a Nolan template and unfortunatelly it does not work.
Link to my website: studio-kruh-test.squarespace.com
Pass: studiokruh

WORKED!

For  MÉRIDA Template

.header-nav-item a {font-family: your-font-name;
  font-size: 10px;
  line-height: 2px;
  letter-spacing: 2px;
  text-shadow:1px 1px black;
text-align: justify;
text-align-last:initial;
}

Hi, 

I have the Mason template and i've tried all of the suggested codes, but nothing seems to work at all.

 

Please help.

 

www.cornflowersandcalico.com

45 minutes ago, CornflowersandCalico said:

 

Add to Home > Design > Custom CSS

.header-nav * {
    font-family: fantasy;
}

 

On 3/11/2020 at 5:51 PM, Mlekoman said:

Hi, I have a Juniper template and unfortunately it does not work.
I've tried everything and with the additional changes suggested to !important and a> *

 

 

On 5/25/2020 at 10:17 PM, joeljeff said:

 

SS 7.1 updated navigation class name. Use this CSS

@font-face {
  font-family: your-font-name;
  src: url(enter your font name url here);
}
.header-nav *, .header-menu-nav * {
    font-family: your-font-name;
}

 

Hey there - I have the Paloma template - I have managed to change the navigation and fonts throughout the site but the site description or title in the navigation will not update. Is there specific code for that.

Please and thanks!

 

Hey guys - I'm on the Burke template and am having issues with font on mobile for text over index sections. Font style should be Brandon Grotesque on desktop and mobile. Any help would be appreciated!

Mock: https://ellipsoid-bellflower-dm4x.squarespace.com/
PW: dreamrut

@font-face { 
  
  font-family: 'Persephone';
  
       src: url('https://static1.squarespace.com/static/63b392b9ae92f31b032bee1d/t/63b39d3a6350f4104142f3bf/1672715580928/Persephone.otf'); }

.has-site-title .Header-branding {font-family: 'Persephone' !important; text-transform: capitalize;}

h1 {font-family: 'Brandon Grotesque'; font-size: 32px;}
h2 {font-family: 'Brandon Grotesque';}
h3 {font-family: 'Brandon Grotesque';}
body {font-family: 'Brandon Grotesque';}

@media only screen and (max-width: 840px)  {
  .has-site-title .Mobile-bar-branding 
  {font-family: 'Persephone' !important; text-transform: capitalize;} 
  
 h1 {font-family: 'Brandon Grotesque' !important; font-size: 32px;}
 h2 {font-family: 'Brandon Grotesque' !important;}
 h3 {font-family: 'Brandon Grotesque' !important;}
 body {font-family: 'Brandon Grotesque' !important;}

}

On 1/3/2023 at 11:39 PM, travisandrew said:

Hey guys - I'm on the Burke template and am having issues with font on mobile for text over index sections. Font style should be Brandon Grotesque on desktop and mobile. Any help would be appreciated!

Mock: https://ellipsoid-bellflower-dm4x.squarespace.com/
PW: dreamrut

@font-face { 
  
  font-family: 'Persephone';
  
       src: url('https://static1.squarespace.com/static/63b392b9ae92f31b032bee1d/t/63b39d3a6350f4104142f3bf/1672715580928/Persephone.otf'); }

.has-site-title .Header-branding {font-family: 'Persephone' !important; text-transform: capitalize;}

h1 {font-family: 'Brandon Grotesque'; font-size: 32px;}
h2 {font-family: 'Brandon Grotesque';}
h3 {font-family: 'Brandon Grotesque';}
body {font-family: 'Brandon Grotesque';}

@media only screen and (max-width: 840px)  {
  .has-site-title .Mobile-bar-branding 
  {font-family: 'Persephone' !important; text-transform: capitalize;} 
  
 h1 {font-family: 'Brandon Grotesque' !important; font-size: 32px;}
 h2 {font-family: 'Brandon Grotesque' !important;}
 h3 {font-family: 'Brandon Grotesque' !important;}
 body {font-family: 'Brandon Grotesque' !important;}

}

Hi,

Brandon Grotesque is Squarespace or Custom Font? If custom font, you haven't declared @font-face for it yet