Nice Web Type – How to use CSS @font-face. Code up top for quick reference, details down below—we’ll prepare typefaces for use on the web, go through @font-face CSS line-by-line, and get the experts’ take on browser support. Updated May 2010 with new syntax from Paul Irish. The CSS: The HTML: <h2>This headline is typeset in <em>your typeface</em>. Before we get started If you want to brush up history and basics, Håkon Wium Lie has a great introduction to the CSS @font-face property in his A List Apart article, CSS @ Ten: The Next Big Thing. Acquire a typeface You may have a typeface in mind, or you may have no idea where to begin. I have also experimented with several properly-licensed typefaces in a series I call Nice Web Type Likes, providing bits of advice with each example and explaining what I feel are each typeface’s merits. For this demonstration I’ll use Fontin Sans from Exljbris. /* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ Go grab a properly licensed typeface, then continue reading here.
Use several font formats. Font Picker - Finding the right font for the job. PXtoEM.com: PX to EM conversion made simple. CSS with vertical rhythm | drewish.com. Ttf2eot. CSS3 Gradient Generator. CSS box border test - evaluate border styles and cross-browser rendering ~ CopySense. Farbcodes • RGB, Hex, HSL und Farbnamen für Webseiten. Bootstrap. Web Design - Dynamic Color Picker. Favicon.ico Generator. Box Shadows.