Current status of the Ning Platform is always available on the Ning Status Blog.

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. 

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • NC for Hire

    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

    Google Fonts
    Making the web more beautiful, fast, and open through great typography
  • 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://api.ning.com/files/bHnnw*GSJgSt3l18r*4XVMPbph4gKVm6Bee9IoC1GU*O9PdDrqgd0uMgw7gsK*7*3fr5KY3xjjbHuNkD-QeC9qKsvNjyGOSQ/scrolltotop.png?width=50') no-repeat ;
            background-size:50px;
     }
    @media only screen and ( max-width:771px ){
    .scrollToTop{height:50px!important;width:50px!important;background-size:40px!important;}}

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

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

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

⚡JFarrow⌁ posted a discussion
If your Ning site has a dark theme, you may be scratching your head wondering how to make the text…
yesterday
Fabricio Giugni replied to Fabricio Giugni's discussion
Blog help needed.
"Hi JFarrow,
Thanks for helping. I don't know much about codes. How to add class="align-left" to the…"
Friday
Fabricio Giugni replied to Fabricio Giugni's discussion
Blog help needed.
"Hi Bizz, 
Thanks for helping. It happen with Image as well. Here is the linkhttps://gplay.com.br/bl…"
Friday
Fabricio Giugni replied to Fabricio Giugni's discussion
Website is too slow. How can I fix it?
"Hi JFarrow,Is there any way to compress and reupload my member's content? All Those Photos are from…"
Friday
⚡JFarrow⌁ commented on Ana Massien's blog post FREE SSL Certificates
"agreed"
Thursday
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
Website is too slow. How can I fix it?
"My 2 cents...
Try to minimize the amount of images loading on the home page...
You dont seem to hav…"
Thursday
⚡JFarrow⌁ posted a discussion
I've been creating topics pages inside my community and if you are doing something similar, having…
Thursday
Fabricio Giugni posted a discussion
Hi there,``My networks are not doing well. How can I fix it? Basically there is just what Ning prov…
Thursday
⚡JFarrow⌁ replied to Unpwn Producer's discussion
I need to secure my site
"Here are the simple steps but you may want to get someone to help you.
Go to cloudflare.com and sig…"
Wednesday
Unpwn Producer replied to Unpwn Producer's discussion
I need to secure my site
"Whatever makes my site not show "not secure" on the browser. Sorry, I'm not familiar with web stuff…"
Wednesday
Trị Sẹo Lồi liked Fabricio Giugni's profile
Wednesday
Trị Sẹo Lồi updated their profile
Wednesday
More…

Meanwhile, you can check our social media channels