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

NC for Hire

Add Google Font to Ning 3.0 Site

Add Google Font to Ning 3.0 Site

The best way to add a Google Font to a Ning 3.0 site, is to use the code provided by Google fonts. If we could upload files to a root directory, there would be a better way for load times. However, I'm finding that using this method on Ning 3.0 is quite successful.

What not to do:

  • Don't apply a Google font to the entire site. Only apply to sections like your Menu Navigation or Header Titles. If your font(s) are not too large, you can apply to both.
  • Don't add more than 2 fonts to your Google Font code, in order to keep the font file reasonably small. The Google Font site will show you the load time for your font file. 

 

 

Instructions:

  1. Go to http://www.google.com/fonts/
  2. Find a font you like, click on: "Add to Collection".
  3. In bottom right next to your Collection font(s), click on "Use".
  4. Read over this page, good to know what you're doing. Once you feel comfortable to move forward,
  5. Locate #3. Add this code to your website:
  6. Select the first Tab "Standard".
  7. Copy your font code, and get ready to paste it into your Ning 3.0 site.
  8. From your Ning site, access the Ning 3.0 Toolbar, and click on first icon: Social Site Manager
  9. Click on link "Custom Code"
  10. Inside the top Box labeled: "<Head> Code", paste your Google Font code into this box.
  11. Example font code: "<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>"
  12. Save.
  13. Now, let's use our new font.
  14. Go to Toolbar, and click on Design Studio icon (2nd icon in toolbar).
  15. Click on Custom CSS.
  16. To add your new Google Font to your H3 (Headers), use the following CSS as your example. Tips: (a) You will probably need to set the font size. (b) Be sure you use backup fonts, called a font stack. In the example I am using Arial and sans-serif, in case the Google Font doesn't load. (c) I find that a font weight is the cleanest look:
  17. h3 {
       font-family: 'Kite One', Arial, sans-serif;  /* The first font should be copied from Google Fonts under usage, see 4. Integrate the fonts into your CSS */
       font-weight:600!important;
       font-size:22px!important; }
  18. To add your new Google Font to your Menu Navigation, use the following CSS as your example. Same as above, use a font stack and check the font size.
  19. .navbar ul li  a {
        font-family: 'Kite One', Arial, sans-serif;
        font-weight:600!important;
        letter-spacing: 0.02em; /* You can add spacing between letters, sometimes needed */
        font-size:18px; }
  20. SAVE your CSS.
  21. Test in all browsers, and across devices.
  22. Good luck and have fun!

Jen

For more tips:

http://jensocial.com/forum/categories/ning-tips-tricks-3-0/listForCategory

For professional Ning Custom Design and Consultation:

http://www.ningcustomdesign.com/

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

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Awwwweeeesome! It works! Thanks a million for the tip, Jen!

    Yes, it looks fine on all devices; desktop, laptop, Mac, iPad, Android, etc.

  • I'd favorite this it if I could  The thing I did wrong initially was not putting an alternate (or backup) font like Arial or Serif for browsers that do support all Google fonts.  Clearly it pays off to actually read Google's instructions.  *lol*  Thank you so much for posting this Jen.  

    • NC for Hire

      Great! To confirm, you were able to utilize the tip?

  • Nice add can't wait to try it out...

  • How would I use this for just maybe blog titles and links?

    • NC for Hire

      C. Brickhouse,

      Ning 2.0 or 3.0? Blog titles on home page, or where? Leaving a link to page is the best way for me to tell you.

      For all links:

      a {

          font-family: yourfontname;

      }

      Best,

      Jen

  • This reply was deleted.
    • NC for Hire

      Great, thanks for the feedback. I didn't receive notifications on everyone's comments until today.

      Best,

      Jen

  • Love this tip Jen. Thank you! Warmly, Susan

    • NC for Hire

      Hi Susan,

      Thanks and great!

      Jen

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

Tyler Durbin replied to Suzie Nielsen's discussion
How to take my site off line?
"How many members do you have?"
Saturday
Ning Support replied to Anastasia_Ning_Support's discussion
Big Migration Sale!
"Hi there!
Thank you for your reply!
We are sorry for the long wait, but unfortunately, your email…"
Friday
Ning Support replied to Anastasia_Ning_Support's discussion
Big Migration Sale!
"Hi there! We're contacting you on behalf of our Ning Migration Team! We contacted on July 30th,…"
Friday
Suzie Nielsen posted a discussion
Hello,.In light of recent actions, I feel it is necessary for me to remove my Political website...…
Aug 9
Rachel Stiles updated their profile
Aug 9
Alex - Rosas † Negras replied to Lucy Gray's discussion
Search Functionality and Other Frustrations
"perfect"
Aug 8
Lucy Gray posted a discussion
Hi All, Question 1: When I send test broadcasts, they typically end up marked as spam in my Gmail…
Aug 7
Lucy Gray replied to Lucy Gray's discussion
Search Functionality and Other Frustrations
"Just wanted to update this post and let everyone know that the search functionality is now indeed…"
Aug 7
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
Ning for Dummies - Interesting
"a thousand thanks ! I would like to buy the book to put it in a painting at home"
Jul 30
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
ONE TIME WE HAD OUR OLD CLASSIC SITE BADGE AND 2.0 NOW IT IS POSSIBLE TO HAVE IT WITH 3.0 THIS IS WHAT I FOUND.
"thank you so much brother"
Jul 30
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
ONE TIME WE HAD OUR OLD CLASSIC SITE BADGE AND 2.0 NOW IT IS POSSIBLE TO HAVE IT WITH 3.0 THIS IS WHAT I FOUND.
"nice work!"
Jul 30
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning for Dummies - Interesting
"you're welcome... its a pdf so you can download it.."
Jul 30
More…

Meanwhile, you can check our social media channels