background preloader

Fonts & Icons

Facebook Twitter

Tinytype. Owner's Manual Perhaps a more accurate description would be an incompatibility table.

tinytype

This shows the state of default system fonts across the most popular platforms. I put this together as a way of finding alternatives to certain webfonts when page weight starts to get too heavy. Notes and Resources Android fonts from versions 1.6 and up except Roboto which exists on version 4.0/Ice Cream Sandwich and up (ht — Stu Robson). New High-Quality Free Fonts. Advertisement Meet the new Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work. Get the book now → Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice out there is enormous, so the time you need to find them is usually time you should be investing in your projects. In this selection, we’re pleased to present Signika, Plastic Type, Bariol, Alegreya, Metropolis, Typometry and other quality fonts.

Free Quality Fonts Link Signika2 A remarkable sans-serif typeface with a gentle character, Signika was developed for wayfinding, signage and other media in which clarity of information is required. Sullivan8 Sullivan is a bold display face that comes in three variations. Sánchez44 Sánchez is a display serif type family. Last Clicks Link (al) Iconmonstr - Free simple icons for your next project. Free Fonts Download, Fonts for Free. 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.

Nice Web Type – How to use CSS @font-face

Updated May 2010 with new syntax from Paul Irish. The CSS: The HTML: <h2>This headline is typeset in <em>your typeface</em>. </h2> 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. Tools vs. <! CSS Fonts Module Level 3. Abstract This CSS3 module describes how font properties are specified and how font resources are loaded dynamically.

CSS Fonts Module Level 3

The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules. The description of font load events was moved into the CSS3 Font Load Events module. Status of this document This is a public copy of the editors' draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. See the section CR Exit Criteria for details on advancing this specification to W3C Recommendation. Features at risk The following features are at risk; if interoperable implementations are not found, they may be removed to advance the other features in this specification to Proposed Recommendation: weight.

Okay Type Foundry. Demo: Pure CSS GUI icons (experimental)