How To used Custom Font/ Non-standard font, web font in website

1)  To Support All Browser / devices you need to convert your font to following format

1. " .oet"   for-IE
2.  " .ttf"  or ".otf" for webkit-browser
3. ".woff" and ".svg" for other browser and devices 

2) Many online file converters are available To convert  your font. find some of file converters links below 

1. http://www.kirsle.net/wizards/ttf2eot.cgi
2. http://onlinefontconverter.com/myfonts.php
3. http://www.fontsquirrel.com/fontface/generator
4. http://www.freefontconverter.com/
5. http://ttf2eot.sebastiankippe.com/
6. http://code.google.com/p/ttf2eot/  ---- Command Line 

Note: Some times "ttf to eot " file conversion wont work properly, you will need to do some trial-and-error to find proper font converter

3) Add converted font files to your website and Add following CSS.  

Here I am using "interstate-boldcondensed.eot" font inside fonts folder

@font-face { 

font-family: 'interstate-bc';

src: url('fonts/interstate-boldcondensed.eot');

src: url('fonts/interstate-boldcondensed.eot?#iefix') format('embedded-opentype'),

      url('fonts/interstate-boldcondensed.woff') format('woff'),

      url('fonts/interstate-boldcondensed.ttf') format('truetype'),

      url('fonts/interstate-boldcondensed.svg#interstate-boldcondensed') format('svg');

}

how to use in CSS ?
- use @faont-face font-family name as follow.

h1 {font-family: 'interstate-bc';}

--- Cheers :)

Tested on : IE 8, Firebox 3.6 and above, Chrome and Safari

Add www to your website link (Missing www in website name)

for  Linux Server Only

Open ".htaccess" fiile from root and add or modify following content

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yoursitename.com [NC]
RewriteRule ^(.*)$ http://www.yoursitename.com/$1 [L,R=301] 


It  will convert  http://yoursitename.com to  http://www.yoursitename.com




---- Enjoy

Web Safe Fonts

Serif Fonts

font-family	Example text
Georgia, serif	This is a heading This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif	This is a heading This is a paragraph
"Times New Roman", Times, serif	This is a heading This is a paragraph

Sans-Serif Fonts

font-family	Example text
Arial, Helvetica, sans-serif	This is a heading This is a paragraph
Arial Black, Gadget, sans-serif	This is a heading This is a paragraph
"Comic Sans MS", cursive, sans-serif	This is a heading This is a paragraph
Impact, Charcoal, sans-serif	This is a heading This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif	This is a heading This is a paragraph
Tahoma, Geneva, sans-serif	This is a heading This is a paragraph
"Trebuchet MS", Helvetica, sans-serif	This is a heading This is a paragraph
Verdana, Geneva, sans-serif	This is a heading This is a paragraph

Tips for Designing Websites / Application  UI

• To get a design started, you’ll need to characterize the kinds of people who will be using your application /site
• Their goals in using the application or site
• The specific tasks they undertake in pursuit of those goals
• The language and words they use to describe what they’re doing
• People like to see immediate results from the actions they take—it’s human nature. If someone starts using an application and gets a “success experience” within the first few seconds, that’s gratifying! He’ll be more likely to keep using it, even if it gets harder later.
• Give directions on what to do first: type here, Drag an image here; tap here to begin, and so forth.
• Make labels short, plainly worded, and quick to read.
• Make it easy to move around the interface, especially for going back to where a wrong choice might have been made hastily.
• Keyboard Only -Some people prefer not to keep switching between the mouse and keyboard because that takes time and effort like Shortcuts, Tab
•   Enable support person-to-person sharing of content. Let people send a URL (or the content itself) to friends and family, either via email or via a social network such as Face book or Buzz.
• Alternative Views let users see one document or workspace through different lenses, to view various aspects of the thing they’re creating.
• Alternative Views - Likewise, a user may want to instantiate the interface more than once, to maintain several trains of thought simultaneously

·         What is the navigational model for your site or app? In other words, how do the different screens (or pages, or spaces) link to each other, and how do users move between them?

1.      Hub and spoke: Most often found on mobile devices, this architecture lists all the major parts of the site or app on the home screen, or “hub.” The user clicks or taps through to them, does what she needs to do, and comes back to the hub to go somewhere else.

2.      Fully connected: Many websites follow this model. There’s a home page or screen, but it and every other page link to all the others—they each have a global navigation feature, such as a top menu.

3.      Multi-level: This is also common among websites. The main pages are fully connected with each other, but the subpages are only connected among themselves (and usually to the other main pages, via global navigation).

4.      Stepwise: Slideshows, process flows, and Wizards (see Chapter 2) lead the user step by step through the screens.

5.      Pyramid: A variant on the stepwise model, a pyramid uses a hub page or menu page to list an entire sequence of items or subpages in one place.

6.      Pan-and-zoom: Some artifacts are best represented as single large spaces, not many small ones. Maps, large images, large text documents, information graphics, and representations of time based media fall into this category.

 - Ref. (Oreilly.Designing.Interfaces)