@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...]]
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;
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; }