How to Change the Navigation Font that is Not Listed

[Scott Bishop]

Does anyone know how to change the font for the navbar to a font that is not listed for Ning 2.0? 

I would like to have Amaranth font for my Nav selectlon. 

I would like to use it site wide as well if that can be done. 

[⚡JFarrow⌁]

Yes.. go to the page for the font

choose your font weights

add this to the top of Custom Code

<link href="https://fonts.googleapis.com/css?family=Amaranth&display=swap" rel="stylesheet">

Then go into Design Studio and add the following

nav.header-nav.navbar {font-family: 'Amaranth', sans-serif;!important}

 

 

hope this helps

[Scott Bishop]

Thanks! ...but it's not working. 

Perhaps I'm putting your Design Studio code in the wrong spot. I just pasted it directly at the top (like the Custom Code) hit Publish and... nothing. 

Here is what my Design Studio looks like (with your code at top): 

nav.header-nav.navbar {font-family: 'Amaranth', sans-serif;!important}
/* END Amaranth Font */
HTML BODY DIV.xg_theme DIV#xg_masthead {
    padding-bottom: 0% !important;
    height:130px!important}
/* Start GEOCOMs Ning 2.0 responsive fullwidth network Part 3 */
HTML BODY .xg_theme .xj_ad_above_header{
  margin-top:-5px!important;
  height:0px!important;
}
HTML BODY DIV.xg_theme FIELDSET.nolegend DIV {
    width: auto !important;
}
@media screen and (min-width:1144px)  {
HTML BODY .xg_theme #xg_navigation ul ul li {
  width:200px!important;
}}
@media screen and (max-width:1144px)  {
DIV#xg.account.external-auth DIV#xg_body,        
DIV#xg.account.external-auth .xg_lightborder{
     width: 92%!important;
     min-width: 100px!important;
     max-width: 500px!important;
    left:0px!important;
    right:0px!important;
    margin-left:auto!important;
    margin-right:auto!important;     } }
@media screen and (max-device-width:1144px)  {
DIV#xg.account.external-auth DIV#xg_body,        
DIV#xg.account.external-auth .xg_lightborder{
     font-size: 34px!important;
    line-height: 35px!important;    } }
@media screen and (max-width: 760px)  {
table.categories p, table.categories ul {
    padding-left: 0px!important;
    padding: 3px!important;
    margin-top: 0px!important;}
  TD.xg_lightborder H3{
    margin-top: 70px!important;
    margin-left: 0px!important;
    padding-left: 0px!important; }
BODY TD.xg_lightborder {
    padding-right: 0px !important;
    padding: 2px !important;
    width:45%!important;}
BODY .xg_theme TD.xg_lightborder,
BODY .xg_theme th.xg_lightborder{
  width:45%!important;
  min-width:45%!important;
  max-width:45%!important;}    
BODY .body_events_main ul.clist div.tb {
    margin-left: 10px;
    margin-top: 110px;}
BODY .body_events_main ul.clist li a span.image {
    margin-right: 16px !important;  } }
/* End Ning 2.0 responsive fullwidth network Part 3 */
/* Add button style */
/* design studio CSS session */
a.xg_sprite.xg_sprite-add, li.right a {
    background-color: rgb(250, 250, 250) !important;
    color: #000;
    border-radius: 10px 0px;
    box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.5) inset;
    outline: 0px none;
    padding: 0px 4px !important;
    border: 2px solid rgb(190, 28, 28) !important;
    text-align: center;
    width:auto;}
/* END Add button style */

/* START Hamburger Menu Style */
@media screen and (min-width:1144px)  {
HTML BODY DIV#xn_bar INPUT#hidenav.icon-appearance{
    display:none!important;
}
DIV#xg_navigation.xj_navigation{
   display:block!important;
    } }
@media screen and (max-width:1144px)  {
HTML BODY DIV#xn_bar INPUT#hidenav.icon-appearance{
background-image: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/3...)!important;
background-size: contain!important;
background-position: center!important;
background-repeat: no-repeat!important;
color: transparent!important;
width:30px!important;
height:30px!important;
font-size:0px!important; } }
@media screen and (max-width:660px)  {
HTML BODY DIV#xn_bar A#qv.xg_sprite.xg_sprite-inbox{
     display:none!important;} }
@media screen and (max-width:560px)  {
HTML BODY DIV#xn_bar A#xn_username{
     display:none!important;} }
/* END Hamburger Menu Style */

/* START Static Background Img */
body { background-image: url(https://api.ning.com/files/-3i3rVffQH24wy*wrzgxisDvjQh7nV6n10SL-6RmjmEsfS-hfgH6twyW7ggQMxm46LOf3bqQ5zkiL3pcU9rc7h6I4q8EKyev/mexicanbeach.jpg); background-attachment: fixed; background-size:1675px 940px; }
/* END Static Background Img */

/* START Navigation Amaranth-Bold Font */
@font-face
{
font-family: Amaranth-Bold; src:url(https://api.ning.com/files/3KGM3KZVxz4ROcwnwWRwBI6neIFPNmHNCpyX*kGjbBWRMhRTvGEW8rd23vm1vUlBuDj8x2e51QzzavS9uO57MptqwSIw3R00/AmaranthBoldItalic.otf)!important;
}
#xg_navigation span
{
font-family: Amaranth-Bold!important; text-transform: capitalize;
}
/* END Navigation Font */

/* Added for font size */
@media screen and (min-width:1144px)  {
DIV#xg_masthead{  
    min-height:150px;
    } }
@media screen and (max-width:760px)  {
BODY .xg_theme h1#xg_sitename {
    font-size: 40px!important;
} }
/* END of font size */

/* START of icon separator */
BODY DIV#xg_themebody DIV#xg_body  DIV.xg_module.module_video UL.clist li SPAN.reactions A{
    padding-left: 20px!important; }
BODY DIV#xg_themebody DIV#xg_body DIV.xg_module.module_video UL.clist li SPAN.reactions A.like-link-1 {
    padding-left: 24px!important;}
/* END of icon separator */

/* Powered by Ning | Mode branding erase */
DIV#xg_foot DIV#xg_footcontent P.left IMG.poweredbylogo{display:none!important;}
DIV#xg_foot DIV#xg_footcontent P.left{font-size:0px!important;}
DIV#xg_foot DIV#xg_footcontent P.left a{font-size:16px!important; margin-left:20px!important;}
/* END Powered by Ning | Mode branding erase */
@media screen and (max-width: 760px)  {
table.categories p, table.categories ul {
    padding-left: 0px!important;
    padding: 3px!important;
    margin-top: 0px!important;}
  TD.xg_lightborder H3{
    margin-top: 70px!important;
    margin-left: 0px!important;
    padding-left: 0px!important;
  }
BODY TD.xg_lightborder {
    padding-right: 0px !important;
    padding: 2px !important;
    width:45%!important;
}
BODY .body_events_main ul.clist div.tb {
    margin-left: 10px;
    margin-top: 110px;
}
BODY .body_events_main ul.clist li a span.image {
    margin-right: 16px !important;
  }
}
HTML BODY .xg_theme .xj_ad_above_header{
margin-top:-5px!important;
height:0px!important;
}
HTML BODY DIV.xg_theme FIELDSET.nolegend DIV {
width: auto !important;
}

/** SCROLL TO TOP **/
scrollToTop{
    width:50px;
    height:50px;
    text-decoration: none;
    position:fixed;    
    right:30px;
        bottom:40px;
    display:none;
        z-index:9999;
    background: url('https://storage.ning.com/topology/rest/1.0/file/get/2479100088?profile=RESIZE_180x180') no-repeat ;
        background-size:50px;
 }
@media only screen and ( max-width:771px ){
.scrollToTop{height:50px!important;width:50px!important;background-size:40px!important;}}

[Bizz]

It looks like you have a semi colun before the important which may stop it working, here in bold

nav.header-nav.navbar {font-family: 'Amaranth', sans-serif;!important}

Try it by removing the semi colon like this

nav.header-nav.navbar {font-family: 'Amaranth', sans-serif!important}

[Scott Bishop]

Thanks Bizz, but it still didn't do anything.