Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
tuanphan

(Share) Navigation Custom Font - 92 Templates

Question

Posted (edited)

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

Add code to Home > Design > Custom CSS

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 by tuanphan
update ss 7.1 class name

You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0

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;
}

Share this post


Link to post
  • 0
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;


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

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;
}

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

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;
}

Share this post


Link to post
  • 0
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> *

 

 

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...