Sosa icon font. Typicons. Free Icon Fonts for Web User Interfaces. By Jacob Gube This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs). What are Icon Fonts? Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs.
And because they’re treated like web fonts, icon fonts: Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)Can be scaled on-the-fly if the user adjusts their web browser settingsCan be rendered with different colorsCan embody font- and text-related CSS properties (like text-shadow and gradient) See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page. To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage. Free Icon Fonts 1. Number of icons: 137. 2. Number of icons: 121. iOS Fonts. Typekit. Adobe Love I CAME to AdobeMAX in Los Angeles to give a talk to a room full of designers.
Before arriving, I thought of Adobe as a historically important 20th century company that was slowly leaking relevance—a company web designers in the era of responsive design have begun to think of with a combination of fondness and embarrassment, like a beloved but somewhat shameful old uncle. I came to LA with those perceptions, but I leave with the impression of an exciting 21st century company in emergence.
Realistic products for a magical age The products I saw were both amazing and realistic. That was the amazing part, but the equally important realistic part was that nobody was pretending this tool would be used to deliver final code on your website. We are now them More than that. It makes me feel good about the future, when so many other things conspire to make us feel the opposite. Filed under: Adobe, business, State of the Web, Typekit Web Design Manifesto 2012 THANK YOU for the screen shot. Loading Typekit fonts asynchronously. Update: We now offer an official asynchronous embed code through the Kit Editor, so you no longer have to create your own.
Details are available in this blog post. The standard Typekit embed code has many advantages. It’s simple, compact, very easy to implement, and automatically helps to prevent the flash of unstyled text (or FOUT). These advantages make it the right choice for the vast majority of sites. Fighting the @font-face FOUT. FOUT is what I’m calling the flash of unstyled text that you get while using @font-face in Firefox and Opera.
Heads up, lots of things have changed around this stuff. check out all the updates on this post! In June, Remy Sharp documented the how a browser progressively renders a page using @font-face. Things work differently between browsers natch: Here’s how in Firefox; basically the text is in a default webfont until the custom font is ready: Webkit takes a very different approach, and very intentionally. I really don’t like the text upgrade FOUT, so I personally prefer webkit’s technique. Best practices for serving fonts: Minimize the overall kilobyte size of your font file. When exactly do browsers download the font file? Garrick at Kernest tipped me off to IE’s interesting behavior here. After some research we can see when the asset download is initiated: I’ve put up a test page where you can experiment and watch your dev tools to see when the file is grabbed.