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

Made by Tuan

Edited by tuanphan

Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

Share this post


Link to post

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


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

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

Create an account or sign in to comment

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


×
×
  • Create New...