JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

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:

Go to http://www.google.com/fonts/
Find a font you like, click on: "Add to Collection".
In bottom right next to your Collection font(s), click on "Use".
Read over this page, good to know what you're doing. Once you feel comfortable to move forward,
Locate #3. Add this code to your website:
Select the first Tab "Standard".
Copy your font code, and get ready to paste it into your Ning 3.0 site.
From your Ning site, access the Ning 3.0 Toolbar, and click on first icon: Social Site Manager
Click on link "Custom Code"
Inside the top Box labeled: "<Head> Code", paste your Google Font code into this box.
Example font code: "<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>"
Save.
Now, let's use our new font.
Go to Toolbar, and click on Design Studio icon (2nd icon in toolbar).
Click on Custom CSS.
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:
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; }
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.
.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; }
SAVE your CSS.
Test in all browsers, and across devices.
Good luck and have fun!

Jen

For more tips:

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

For professional Ning Custom Design and Consultation:

http://www.ningcustomdesign.com/

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by Gaelen on August 26, 2013 at 3:35pm

I've tried this and it changes the font beautifully. What I am after is when you get into a group where all the forums, photos etc are situated and you have the header of what your site and just below the name of your group which I will call the group title. What I was wondering is can I change all the fonts of the group titles. I found Bad Script on google font which I would love to change all the group titles. Is this possible

▶ Reply

Permalink Reply by JenSocial on August 27, 2013 at 11:27pm

Hi Gaelen,

If you could share a couple of page links, I'll take a look. It can be done. I just don't know all of the classes by memory, like I do for 2.0. I need to look.

Best,

Jen

▶ Reply

Permalink Reply by Gaelen on August 27, 2013 at 11:52pm

http://lifesmagickalweave.ning.com/groups/age-of-the-sage-cafe

This is my website page where the group title age of the sage cafe is . I don't know if this is what you were asking for and this is the script

1. Choose the styles you want:

Bad Script

Grumpy wizards make toxic brew for the evil Queen and Jack

Page Load18

Impact on page load time

Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.

2. Choose the character sets you want:

Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.

» Read more on how to use subsets

Standard
@import
Javascript

3. Add this code to your website:

Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.

» See an example

4. Integrate the fonts into your CSS:

The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

font-family: 'Bad Script', cursive;

Instructions: Add the font name to your CSS styles just as you'd do normally with any other font.

Example:

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

Google Fonts are powered by the

Fonts API

Check out more advanced techniques for using Google Fonts
like the WebFont Loader — to fight the flash of unstyled text!

I hope this is what you want. If not let me know

▶ Reply

Permalink Reply by JenSocial on August 28, 2013 at 12:27am

Try this in Advanced CSS:

.groupHeader-heading {
font-family: 'Bad Script', cursive;
}

BUT, on implementing the Google Font, you just need to add the code under the STANDARD TAB on the Google Font page, and add to Head <code> under Custom Code.

Hope that helps,

Jen

▶ Reply

Permalink Reply by Joe Shirley on September 25, 2013 at 6:41pm

Nice! I tried this and it worked wonderfully. So I joined your site! :-)

▶ Reply

Permalink Reply by JenSocial on September 25, 2013 at 7:36pm

Hi Joe,

Welcome! Thank you for the feedback, glad it helped.

Best Regards,

Jen

▶ Reply

Permalink Reply by Susan Kay Daniels on March 4, 2014 at 1:27pm

I'm having nothing but trouble with this new Design Studio upgrade. It was running great for me, now it's burning up my machine, just like Ning 2.0.

▶ Reply

Permalink Reply by JenSocial on March 4, 2014 at 1:32pm

Burning up your machine? Do you mean making your hard drive churn/spike? I had an issue the other night. I have a relatively new laptop, and all of a sudden it was blazing hot. I had to re-boot before it was over with. And, I'm 99% sure the spiking of the hard drive was caused from a Ning site. We both should report this as a bug, it that's what you mean. Oh, and my Partner said that his computer hard drive spikes when he's on any page that has the icons for add, edit, feature. Maybe we should start a new discussion, since this has little to do with Google Fonts, lol.

▶ Reply

Permalink Reply by Susan Kay Daniels on March 9, 2014 at 11:42pm

Maybe I should have spoke up before. Glad I'm not the only one. This is good information. Yes, maybe a new conversation is a good thing.

But, I know why I brought it up here. It's because I wasn't able to use Google fonts after the upgrade. I've since moved on to a V2 theme (just because it was there) and haven't yet tried the Google fonts in that theme. Let me do that and get back to this conversation. Sometimes thoughts are in my head and they don't come out right LOL! Obviously, this was one of those times.

:) Warmly, Susan