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).
In this post
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'; }
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’;
}
SS changed navigation html tag. I updated code. You can check again.
I can’t manage to make this work 🙁 SS 7.1
@font-face {
font-family: ‘GOTHAM’;
src: url(https://static1.squarespace.com/static/5f57c32446cf806116bdf75a/t/5f5a4c0d64ffdc4c3bfaf4d7/1599753229450/GothamBlack.otf),
}
.header-nav-item {font-family: ‘GOTHAM’;
}
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
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)
I don’t see Navigation. Did you remove?
If you have any questions, please post on SS forum or send to my email: https://beaverhero.com/covid19
I will check carefully at the end of day
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…,