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/listForC...

For professional Ning Custom Design and Consultation:

http://www.ningcustomdesign.com/

 

Views: 712

Reply to This

Replies to This Discussion

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

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

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:

No Fonts Selected.

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

3. Add this code to your website:

<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Bad+Script::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
No Fonts Selected.

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;
No Fonts Selected.

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

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

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.

<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>

Hope that helps,

Jen

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

Hi Joe,

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

Best Regards,

Jen

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.  

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.

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

Nice Thread Jen!

RSS

Members

Support & Tips Forum

PILOT PROJECT THEE ACHIEVABLE MISSIONS

Started by Captain Major RockettBobebuzz in Ning Tips & Tricks 2.0. Last reply by Ning.spruz.com Dec 28, 2018. 1 Reply

Generic Link for "My Friends" and Menu Tab - Ning 3

Started by jQueryHelp in Ning 3.0. Last reply by Ning.spruz.com Dec 26, 2018. 6 Replies

Inspirational People Of The Las Vegas Shooting

Started by Henry Massingale in Ning 3.0. Last reply by Ning.spruz.com Dec 26, 2018. 1 Reply

© 2019   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

\ua\ua\ua\ua\ua\ua\ua\ua\ua\ua\ua\ua\uaHome\ua/div> \uadiv>\ua\ua\ua\ua\ua\ua\uaVIP Ning Tips\ua/div> \uascript type="text/javascript" language="javascript">\udx$(document).ready(function() {\udif (x$("div.xg_widget_main_index_index").length > 0) { \udx$('div.jenhome').css('display','none'); \ud}\ud});\ud \ua!-- Scroll Up --> \ua!-- © Copyright 2012 JenSocial VIP Ning Tip, Do not remove Credits. --> \uascript type="text/javascript" language="javascript">\udif (typeof(x$) != 'undefined') {\udx$('.xj_user_info').prepend(x$('.module_members'));\udx$('.xg_widget_groups .module_text').prepend(x$('#xg.xg_widget_groups .module_page'));\udx$('.module_members').clone().appendTo(x$('#membermod'));\udx$('#forummod').prepend(x$('.module_forum'));\udx$('#photomod').prepend(x$('.module_photo'));\udx$('#sidebarmod').prepend(x$('.xj_sidebar_content'));\ud/* x$('#la').load('http://jensocial.com .module-feed'); */\ud/* x$('#la').load('http://jensocial.com/activity/index/getActivityItems'); */\ud}\ud \ua!-- Script Credit: http://gazpo.com/2012/02/scrolltop/ --> \uaa href="#" class="scrollup">Scroll \uastyle>\ud#google_translate_element {height:26px!important;margin-top:3px;}\ud.goog-te-gadget-simple {padding:0px!important;height:26px!important;}\ud.goog-te-gadget img {float: left;}\ud.goog-te-menu-value {margin-top:-5px!important;}\ud.scrollup {\ud background: url("http://api.ning.com:80/files/mJRnjZqTZmfsxQfyGPDSbx3Wy0-ETJGBjTsQQLBbYKU4vfategDE*OB2E0gz*SVBXdnKflIU5vtEvydu-Xzodh9YeU6NnTQX/scrollup2_icon.png") no-repeat scroll 0 0 transparent;\ud bottom: 28px;\ud display: inline !important;\ud height: 34px;\ud opacity: 0.3 !important;\ud position: fixed;\ud right: 0;\ud text-indent: -9999px;\ud width: 40px;\ud z-index: 999;\ud}\ud.scrollup:hover {\ud opacity:0.99!important;\ud}\ud/* Tighten up Top News/Everything */\ud#xg_network_activity .activity-feed-view-selector {font-size:16px;margin-top:5px;margin-bottom:0px;}\ud#xg_network_activity .activity-feed-view-selector:before {content: "» ";}\ud/* Fix Navigation Sub Tabs */\ud#xg_navigation div.xg_subtab ul li {margin-top:3px!important;border-bottom:1px solid #ffffff!important;}\ud#xg_navigation div.xg_subtab {width:auto!important;}\ud#xg_navigation ul div.xg_subtab ul li a {width:inherit!important;}\ud\ud \uascript type="text/javascript">\ud $(document).ready(function(){\ud $(window).scroll(function(){\ud if ($(this).scrollTop() > 100) {\ud $('.scrollup').fadeIn();\ud } else {\ud $('.scrollup').fadeOut();\ud }\ud });\ud $('.scrollup').click(function(){\ud $("html, body").animate({ scrollTop: 0 }, 600);\ud return false;\ud });\ud });\ud \ua!-- End Scroll Up --> \ua!-- VIP Menu Tab --> \uadiv id="viptop">\ua\ua\ua\ua\ua\ua\ua \ua/div> \ua!-- End VIP png, style in specstyles.css --> \ua!-- Styles --> \ualink rel="stylesheet" href="http://storage.ning.com/topology/rest/1.0/file/get/137628493?profile=original"> \ua!-- Call Styles for Rocket, Social Media Pngs, NingBar Nav, Tabbed Content, and more... --> \ualink rel="stylesheet" href="http://storage.ning.com/topology/rest/1.0/file/get/137628966?profile=original"> \ua!-- NingBar Links js call --> \uascript type="text/javascript" src="http://storage.ning.com/topology/rest/1.0/file/get/137628421?profile=original"> \uascript type="text/javascript" language="javascript">\udif (typeof(x$) != 'undefined') {\udx$("li#xg_tab_xn139").prepend('\ua\ua\ua\ua\ua\uaBest Ning Tips');\ud}\ud \ua!-- Format Special Groups --> \uascript type="text/javascript">\udif (window.location.href.split('group/')[1] == 'ningnetworktips') {\udx$('div.pad5').css('display','none'); \udx$('div.xg_module_head').css('display','none');}\ud \ua!-- End Grps --> \uascript type="text/javascript">\udif (window.location.href.split('group/')[1] == 'ningnetworktips') {\ud x$('div.xg_module_foot ul li.left:contains("Add")').replaceWith("\ua\ua\ua\ua\ua\uaPlease add new Ning Tips & Tricks to Support & Tips Forum.");\ud}\udif (window.location.href.split('group/')[1] > 'ningnetworktips/forum') {\ud x$('ul.navigation li.right:contains("Add")').replaceWith("\ua\ua\ua\ua\ua\uaPlease add new Ning Tips & Tricks to Support & Tips Forum.");\ud}\udif ((window.location.href.split('forum2/')[1] == 'topic/new/') || (window.location.href.split('forum2/')[1] > 'topic/new/')) {\ud x$('form#add_topic_form fieldset.nolegend dl dt label:contains("Social Directory Listing Title:")').replaceWith("Social Directory Listing Title: (Limit 1 Listing per Member Account)");\ud}\udif (window.location.href.split('group/')[1] == 'premiumningtipsbyjen') {\udx$('.right.xg_lightborder.navbutton:contains("Join Premium")').before("\ua\ua\ua\ua\ua\ua");\udx$('.toggle_list').css('width','100%');\udx$('.toggle_head').css('background-color','transparent');\ud}\ud \ua!-- Rocket Display/Call --> \uaimg id="rocket" src="http://storage.ning.com/topology/rest/1.0/file/get/137628427?profile=original"> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud x$('#rocket').addClass('animated lightSpeedIn');\ud}\ud \uadiv id="social-feeds">\ua\ua\ua\ua\ua\ua\ua \ua/div> \ua!-- End Social Media pngs --> \ua!-- Special Ad Within Forums-Blogs --> \uadiv id="tmp_insideforumblog" style="display:none;"> \ua\ua\ua\ua\ua\ua\ua \ua\ua\ua\ua\ua\ua\ua . \ua/div> \uascript type="text/javascript">\udif (window.location.href.split('forum/')[1] > 'topics/') {\ud /* insert ad/content inside forums */\ud x$(".xg_widget_forum_topic_show div.discussion div.description").prepend('\ua\ua\ua\ua\ua\ua
');\ud x$(".xg_widget_forum2_topic_show div.discussion div.description").prepend('\ua\ua\ua\ua\ua\ua
');\ud x$(".xg_widget_profiles_blog_show .xg_blog .postbody").prepend('\ua\ua\ua\ua\ua\ua
');\ud var t_insideforumblogCode = document.getElementById('tmp_insideforumblog');\ud var insideforumblogCode = document.getElementById('insideforumblog');\ud insideforumblogCode.innerHTML = t_insideforumblogCode.innerHTML;\ud}\ud \ua!-- End Special Ad Forums-Blogs --> \ua!-- Copyright @ 2012 JenSocial, VIP Tip - Do not remove this line. Tip: Install FB, Twitter, SU, GP, and Pin buttons after share links --> \uadiv id="tmp_aftershare_social" style="display:none;">\ua\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua
\ua\ua\ua\ua\ua\ua\ua
\ua/div> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud /* insert 5 social media buttons below blogs, photos, and videos uses same code */\ud x$(".share-links").after('\ua\ua\ua\ua\ua\ua
');\ud var t_aftershare_socialCode = document.getElementById('tmp_aftershare_social');\ud var aftershare_socialCode = document.getElementById('aftershare_social');\ud aftershare_socialCode.innerHTML = t_aftershare_socialCode.innerHTML; \ud}\ud \ua!-- End Install 5 media after all share --> \ua!-- Add Categories and Discussion List Links, Forum --> \ua!-- Main Forum Page --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$('.xg_widget_forum div.xg_headline div.tb h1:contains("Forum Discussions")').append("\ua\ua\ua\ua\ua\uaList: >>Categories");\ud}\ud \ua!-- Category Page --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$('.xg_widget_forum div.xg_headline div.tb h1:contains("Discussion Forum")').append("\ua\ua\ua\ua\ua\uaCategories: >>Discussion List");\ud}\ud \ua!-- End Categories List Links --> \ua!-- Add Categories and Entries Links, Forum2 --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud x$('.xg_widget_forum2 div.xg_headline div.tb h1:contains("Discussion Social Directory Listings")').replaceWith("\ua\ua\ua\ua\ua\ua

Social Directory Listings - Categories

" + "\ua\ua\ua\ua\ua\ua

>>Entries

");\udx$('div.xg_headline div.tb h1:contains("Support & Tips Social Directory Listings")').replaceWith("\ua\ua\ua\ua\ua\ua

Social Directory Listings

");\ud}\ud \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud x$('.xg_widget_forum2_index_index div.xg_headline div.tb h1:contains("Social Directory Listings Social Directory Listings")').replaceWith("\ua\ua\ua\ua\ua\ua

Social Directory Listings

" + "\ua\ua\ua\ua\ua\ua

>>Categories

");\ud}\ud \ua!-- End Cats and Entries Links --> \ua!-- Accordion --> \uascript type="text/javascript">\udx$(document).ready(function(){\ud//Set default open/close settings\udx$('.acc_container').hide(); //Hide/close all containers\udx$('.acc_trigger:first').addClass('active').next().show(); \ud\ud//On Click\udx$('.acc_trigger').click(function(){\ud\u9f( x$(this).next().is(':hidden') ) { \ud\u9x$('.acc_trigger').removeClass('active').next().slideUp(); \ud\u9x$(this).toggleClass('active').next().slideDown(); \ud\u9\ud\u9eturn false;\ud});\ud\ud});\ud \ua!-- End Accordion --> \ua!-- Add QuickPost Links to GOTO links in Status Box --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$(".xg_widget_main_index div.xj_StatusAndShareLink div.xj_status form div.input div.form-hint").prepend('\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua Goto Your: \ua \ua \ua \ua \ua \ua Blog · \ua \ua \ua \ua \ua \ua Discussion · \ua \ua \ua \ua \ua \ua Events · \ua \ua \ua \ua \ua \ua Photos · \ua \ua \ua \ua \ua \ua Videos\ua\ua\ua\ua\ua\ua
');\ud}\udelse{\ud}\ud \ua!-- Google Analytics --> \uascript type="text/javascript">\ud var _gaq = _gaq || [];\ud _gaq.push(['_setAccount', 'UA-2481418-2']);\ud _gaq.push(['_trackPageview']);\ud\ud (function() {\ud var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\ud ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\ud var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\ud })();\ud \uascript src="http://static.getclicky.com/js" type="text/javascript"> \uascript type="text/javascript">clicky.init(213462); \uanoscript>\ua\ua\ua\ua\ua\ua\ua

Clicky

\ua/noscript> \ua!-- Claim Outbrain for Blogs --> \uainput type="hidden" name="OBKey" value="zKc+F5C7zcWMfMcACUTh1g=="> \uascript language="JavaScript">var OBCTm='1288731617374'; \uascript language="JavaScript" src="http://widgets.outbrain.com/claim.js"> \ua!--Outbrain Widget for Blogs --> \uadiv id="tmp_blog_outbrain" style="display:none;"> \ua\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua\ua\ua\ua\ua\ua\ua
\ua/div> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud /* insert widget bottom of blogs */\ud x$(".xg_blog .postbody").after('\ua\ua\ua\ua\ua\ua
');\ud var tempblogCode = document.getElementById('tmp_blog_outbrain');\ud var origblogCode = document.getElementById('blog_outbrain');\ud origblogCode.innerHTML = tempblogCode.innerHTML; \ud}\ud \ua!-- END Outbrain Blogs --> \ua!-- Claim Outbrain Forums --> \uainput type="hidden" name="OBKey" value="BIxDaM2ll4yyQlbXtzGbSw=="> \uascript language="JavaScript">var OBCTm='1288667913412'; \uascript language="JavaScript" src="http://widgets.outbrain.com/claim.js"> \ua!--Outbrain for Forums --> \uadiv id="tmp_forum_outbrain" style="display:none;"> \ua\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua\ua\ua\ua\ua\ua\ua
\ua/div> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud /* insert widget bottom of forums */\ud x$(".xg_widget_forum_topic_show div.discussion").after('\ua\ua\ua\ua\ua\ua
');\ud var tempforumCode = document.getElementById('tmp_forum_outbrain');\ud var origforumCode = document.getElementById('forum_outbrain');\ud origforumCode.innerHTML = tempforumCode.innerHTML; \ud}\ud \ua!-- END Outbrain Forums --> \ua!-- Toggle Content --> \uascript type="text/javascript">\ud x$(".toggle_body").hide();\ud //toggle the content with class toggle_body\ud x$(".toggle_head").click(function()\ud {\ud // 200 is good for fast, and 600 for slow\ud x$(this).next(".toggle_body").slideToggle(200);\ud });\ud \ua!-- End Toggle --> \ua!-- Tabbed Content --> \uascript type="text/javascript">\ud\u9$(".jstab_content").hide(); //Hide all your content under each tab\ud\u9$("ul.jstabs li:first").addClass("active").show(); //Activate the first tab\ud\u9$(".jstab_content:first").show(); //Show the first tab content\ud\u9/On Click Event\ud\u9$("ul.jstabs li").click(function() {\ud\u9x$("ul.jstabs li").removeClass("active"); //Remove any "active" class\ud\u9x$(this).addClass("active"); //Add "active" class to selected tab\ud\u9x$(".jstab_content").hide(); //Hide all tab content\ud\u9var activeTab = x$(this).find("a").attr("href"); \ud\u9x$(activeTab).fadeIn(); //Fade in the active ID content\ud\u9return false;\ud\u9);\ud \ua!-- END Tabbed Content --> \ua!-- js File for Simple HTML Insert - JS Code Generator Developed by Elson --> \uascript type="text/javascript" src="http://storage.ning.com/topology/rest/1.0/file/get/137628310?profile=original"> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$(".xg_chat div#mainChatContainer.xg_verticalPane div.xg_chatWindow div.xg_chatBar").after('\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua Welcome to JenSocial! \ua \ua \ua \ua \ua \ua Access VIP Club.\ua\ua\ua\ua\ua\ua
');\ud}\udelse{\ud}\ud \ua!-- Replace NingBar Search with Google Search --> \uascript type="text/javascript" src="http://storage.ning.com/topology/rest/1.0/file/get/137628280?profile=original"> \ua!-- Social Wrapper Icons After NavBar --> \uascript type="text/javascript" language="javascript">\udvar fb3_html = '\ua\ua\ua\ua\ua\ua\ua/div>\ua/div>\ua/div>\ua/div>\ua/div>\ua/div>