background preloader

Bulletproof @font-face syntax

Bulletproof @font-face syntax
Let me introduce you to the best way to do your @font-face definitions: This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf. May 12th, 2010. If you’re looking to just put @font-face to use today, just head to FontSquirrel’s generator. Okay, let’s see what we got here… Conditional comments (via) Ugh. Double declarations (via) The problem here is that, as Andrea points out, IE will actually download the .otf file. Because after all, IE doesn’t understand the format hint, right? GraublauWeb.otf’)%20format(‘opentype Oops, looks like someone forgot a ? Mo’ Bulletproofer (via) Richard Fink proposed this alternate syntax actually as a response to this post, but I’ve included it back here. The local reference Much more concise and clean. Bulletproof @font-face Demo Android :/

https://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Simple Table CSS3 Premium Pixels is an excellent design resource run Orman Clarke. He publishes slick photoshop files every few days, including this Simple Table design. For a little challenge I decided to turn his Photoshop file into actual code using CSS3 and a bit of JQuery. You can see a demo here or download the code (feel free to use in your own projects, no attribution necessary). Box Lessons This is a Problem & Workaround Set for a series of CSS Boxes going from a simple single box, through 3 columns with a full width top box, all with variations. What this isn't, is a how-to for CSS layout. This is a how-to for dealing with the misinterpretations of our current browsers. If you're new to CSS, this is a better place to start. Enjoy. CAVEAT - a Warning and an Explanation 20 New High Quality Free Fonts - Smashing Magazine Advertisement Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.

How to Achieve Cross-Browser @font-face Support At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers. Preface If you haven’t been living in a cave for the past few months, you will have heard lots of talk about the @font-face CSS declaration, which lets you use custom fonts in your web pages. Fonts Signika Negative Grumpy wizards make toxic brew for the evil Queen and Jack. Light 300Grumpy wizards make toxic brew for the evil Queen and Jack. Normal 400Grumpy wizards make toxic brew for the evil Queen and Jack. Semi-Bold 600Grumpy wizards make toxic brew for the evil Queen and Jack.

How to create slick effects with CSS3 box-shadow Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo

SelectORacle English & Spanish translations of CSS2 and CSS3 selectors Ever wondered what a particularly complex CSS selector really means? Here's your chance to find out! Liminal Existence: Beautiful Lines Update: This was written just before the iPhone 4 came out, with Apple’s new 326 ppi display. With screens that vary from 75 to 326 ppi (and no doubt, beyond), this stuff matters now. Go and make your sites resolution independent. If you don’t care about the critique of a designer’s blog, scroll to the bottom to learn how to make your site look amazing on all these very shiny new devices. Typography on the web is ugly. Ragged-right is an abomination, a carry-over from when text rendering was done by Netscape Navigator on 486s with 16 MBs of RAM.

Related: