@font-face

@font-face {
    font-family: "Helvetica Neue";
    src: url('/fonts/HelveticaNeue.eot');
    src: url('/fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
         url('/fonts/HelveticaNeue.woff') format('woff'),
         url('/fonts/HelveticaNeue.ttf') format('truetype'),
         url('/fonts/HelveticaNeue.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
p { font-family: "Helvetica Neue", Verdana; }

Nota Internet Explorer: riconosce la proprietà CSS @font-face, ma non i file dei font in formato TTF, OTF Per poter includere il file di un font per Internet Explorer è necessario convertire il file in formato EOT Embedded Open Type. Il tool che Microsoft mette a disposizione per la creazione dei file EOT è WEFT ed è pessimo. http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

usa invece eot-utils con il comando

mkeot OTF-file [URL [URL...]]

icon fonts

web fonts

oltre googlefonts

Specify in CSS

<! Use the following CSS rules to specify these families: > font-family: 'Quicksand', sans-serif; font-family: 'Roboto', sans-serif; font-family: 'Lato', sans-serif; font-family: 'Oswald', sans-serif; font-family: 'Open Sans', sans-serif;

Helvetica

alternative:

better helvetica possible:

body {
   font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande',  'Liberation Sans', FreeSans, sans-serif;
   font-weight: 300;
}
// Impact
.classname {
    color: #333333;
    font-family: Impact, Charcoal, sans-serif;
}
// Palatino Linotype
 .classname {
    color: #333333;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
//Tahoma
.classname {
    color: #333333;
    font-family: Tahoma, Geneva, sans-serif;
}
//Century Gothic
.classname {
    color: #333333;
    font-family: Century Gothic, sans-serif;
}
//Lucida Sans Unicode
.classname {
    color: #333333;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
// Arial Black
.classname {
    color: #333333;
    font-family: 'Arial Black', Gadget, sans-serif;
}
// Times New Roman
.classname {
    color: #333333;
    font-family: 'Times New Roman', Times, serif;
}
// Arial Narrow
.classname {
    color: #333333;
    font-family: 'Arial Narrow', sans-serif;
}
// Verdana
.classname {
    color: #333333;
    font-family: Verdana, Geneva, sans-serif;
}
// Copperplate Gothic Light
.classname {
    color: #333333;
    font-family: Copperplate / Copperplate Gothic Light, sans-serif;
}
// Lucida Console
.classname {
    color: #333333;
    font-family: 'Lucida Console', Monaco, monospace;
}
// Trebuchet MS
.classname {
    color: #333333;
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
// Courier New
.classname {
    color: #333333;
    font-family: 'Courier New', Courier, monospace;
}
// Arial
.classname {
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
}
// Georgia
.classname {
    color: #333333;
    font-family: Georgia, Serif;
}