Buy me a coffee

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: 'nexa'; 
  src: url(https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5e3f7cb899dd6e23d8b1e836/1581219002767/nexa-regular.otf); 
} 
.header-nav-item a {
    font-family: 'nexa';
}
.header-menu-nav-item a {
    font-family: 'nexa';
}

 

7 thoughts on “Squarespace: Change Navigation Custom Font”

  1. Hi there! I tried the coding out for 7.1 and wasn’t able to get it to work. Can you please help? Here is what I did:

    @font-face {
    font-family: ‘Tox Typewriter’;
    src: url(‘https://static1.squarespace.com/static/5dbbda2823e1b16011276261/t/5edaa1171dcce83950c55017/1591386391458/Tox+Typewriter.ttf’);
    }
    .Header-nav-item a {
    font-family: ‘Tox Typewriter’;
    }

    Reply
    • Your code is incorrect. Please check again code in above post.
      The class should be .header-nav-item a and .header-menu-nav-item a

      Reply
  2. Hi, I tried the code on 7.1 but it doesn’t work… Can you help me?

    @font-face {
    font-family: ‘DIN Next Rounded LT W041448969’;
    src: url(‘https://static1.squarespace.com/static/5f71b8cca49b5d4c23cea2a7/t/5f71bb4f0a75e61a51deba2b/1601289040259/ddfe8678-9044-401c-be1c-b4d9d8669509.woff’); }

    * {
    font-family: DIN Next Rounded LT W041448969 !important
    }

    website: eska-optik.squarespace.com (pw: 12345)

    Reply
      • Hi, thanks for the reply. I need the custom font for all texts, not only for navigation (at the moment there is no nav, because its a “under construction” site) but also for p, h1, h2, etc. Thats why I have used the “*” instead of p, h1, h2, .header-nav…,

        Reply

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder