css

Nice Web Type – How to use CSS @font-face
— Resource (external link)
Skills: CSS
Tags: @font-face, css, font-face, fonts, typography, webfonts

This is a very well-written, easy-to-understand blog post describing how to use the CSS property @font-face to implement non-standard fonts in your web site.

Font Squirrel | Create Your Own @font-face Kits
— Resource (external link)
Skills: CSS
Tags: @font-face, css, cufon, font, font-face, fonts, generator, typography, webfonts

This small web app is a must-have when you are using the CSS @font-face property. You upload a font file to Font Squirrel (be sure you have the legal right to embed the font on web pages), select a few options, and then Font Squirrel generates the font in other font file formats so that your font works across different browsers. It even generates the @font-face CSS code that references the new font files!

Modernizr Documentation
— Resource (external link)
Skills: CSS, HTML5, JavaScript, jQuery
Tags: @font-face, css, javascript, jquery, mobile

Modernizr is a handy JavaScript library that detects the capabilities of the browser viewing your site, and then dynamically adds classes to the <html> root element on the page, based on what it detects. You can then write your CSS and jQuery selectors using these classes. An example use would be to detect support for the @font-face CSS property (I am doing that on this site). You can also use it to detect support for various HTML5 elements. I have also heard of people using it to make their sites more mobile browser-friendly.

Fonts we can all share — Open Font Library.org
— Resource (external link)
Tags: @font-face, css, cufon, fonts, opensource, typography, webfonts
The League of Moveable Type
— Resource (external link)
Tags: @font-face, css, cufon, fonts, opensource, typography, webfonts
My Love/Hate Affair With Typekit – Jeffrey Zeldman Presents The Daily Report
— Resource (external link)
Tags: css, cufon, fonts, sifr, typekit, typography, webfonts
Cufon vs. Typekit « CMYK Process
— Resource (external link)
Tags: css, cufon, fonts, typekit, typography, webfonts
Schema | Testing Cufón, @font-face, and Typekit
— Resource (external link)
Tags: css, cufon, fonts, sifr, typekit, typography, webfonts
Typekit: Goodbye sIFR, Cufon? « Digital Marketing Blog by Soak Digital
— Resource (external link)
Tags: css, cufon, fonts, sifr, typekit, typography, webfonts
Cool audio player solution for pages with multiple audio clips
— Blog Post
Skills: JavaScript, jQuery
Tags: audio, css, javascript, jquery, mp3, tutorials

This tutorial demonstrates one way of setting up an audio player for a page with multiple audio clips. The end result is the following.

Rain and thunder
Elevator door
Door handle creaking
Applause
School bell

Here's a little background on what led to this solution. Some time ago, I was asked to build a small site that included dozens of audio clips on one page. The client suggested I base this site on an existing site of hers that also had a page with dozens of audio clips. Visitors to the site could play different audio clips by clicking on a play button for each clip. The play buttons for the clips were laid out in a table similar to the one depicted below:

Table of audio clip play buttons