fonts.com blog

Using Fonts.com Web Fonts with Ning

by Ed Platz

This post continues a series of articles about using Fonts.com Web Fonts to create an engaging and effective website. Today’s topic is the Ning™ Platform, which is  popular for creating social websites. If you are on the Ning Plus or Ning Pro plan you can use Fonts.com Web Fonts to make your network stand out from the rest.
 
Here is the top of my Ning network page, using the Theme “Ephemera” — before adding fonts. It’s very nice, but I’d like to personalize it a bit:
Ning theme "Ephemera" before adding Web Fonts
 
Using Fonts.com Web Fonts is easy. Create your account at www.webfonts.fonts.com, and then:
 
     

  1. Create a new project and name it after your network. You can have many projects – even with our Free version!
  2.  
  3. Choose the fonts you want to use. Be creative! Consider what your favorite sites are using, such as AmericanIdol.com. I personally recommend the ITC Avant Garde Gothic® typeface, or try the Frutiger® Next design, which is one of the most popular fonts of the world’s most trusted brands. Of course, our timeless Helvetica® face is always at your service.
  4.  
  5. Assign your fonts to selectors. If you’re not sure about which selectors affect which pieces of your text, use the ‘Inspect Element’ feature of the Firebug® plug-in for the Firefox® browser.
  6.  
  7. Once your style sheet is all set, publish your changes and copy the line of code from the ‘Publish’  tab.
  8.  
 
OK, your Web Fonts project is all set, so log in to Ning.com, click on “My Network” and then click “Custom Code”. Paste the line of code in the box. Save it away, and within minutes you will be able to refresh your screen and  see the effects of your style sheet changes.  Here’s what my site looks like now  - imagine what it could look like if I had your creativity:
Ning theme "Ephemera" after adding Web Fonts
 
As always, let us know how it goes, as we always welcome your feedback.  Check out what some of our customers are doing at: http://webfonts.fonts.com/en-US/OverView/WebFontShowcase.
 

Tags: , ,

Comments are closed.