Squarespace: Change Navigation Custom Font

In this post, I will share how to change Navigation Custom Font with Custom CSS, for all templates in Squarespace 7.0 and Squarespace 7.1.

Notes

  • Add !important to after if the code doesn’t work. Eg: font-family: your-font-name !important;
  • Add code to Home > Design > Custom CSS
  • Send me a message if you have any questions/the code doesn’t work (free).

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-item a {
  font-family: your-font-name;
}

Share this post:

Leave a Comment