I’m always eager to save 20 seconds. So in that spirit, here’s this little TextMate snippet for @font-face declarations. Set it up with a tab trigger “ff” or whatever suits your fancy, and zoom zip zoom away. Shorty lightning burning on the keyboard.
@font-face {
font-family: '${1:FontName}';
src: url('${1:FontName}.eot');
src: local('${1:FontName}'),
url('${1:FontName}.ttf') format('truetype'),
url('${1:FontName}.svg#font') format('svg');
}
You can find all of our snippets at Snipplr.
MyFonts is styled more like a font blog than a lot of other font resources. Featured fonts rotate on the front page, and there’s a tag cloud with all the most popular tags. Another cool thing is their list of popular designers in the sidebar. If you really like someone’s style, you can easily find more about them and maybe follow their new developments.
Dafont is where I get most of my fonts from. It’s easy to browse, and very well organized by category. If you’re going for a specific look, like Horror, Grunge, Futuristic, Elegant, etc., there’s almost certainly a category already in place. It also has the usual classifications of serif and sans-serif.
Like dafont, urbanfonts is a huge resource. Plenty of categories mean that you’ll definitely find something new, though it might mean wading through a lot of stuff you don’t particularly care for. Note that there’s nothing particularly urban about the font selection — it has all kinds!
Another large library, Fontica has over 2,000 free fonts ready for download. It’s loaded a bit heavy with advertisements, but it’s not too much of a distraction; you can certainly find what you need without too much hassle.
Fontspace has almost 10,000 fonts, plenty of dingbats and decorative fonts that you could use in a variety of projects, or just for toying around in Photoshop. One very cool feature is that, when browsing, you can type custom text to preview in each font family. If you’re only going to use a typeface for a single logo or word, this comes in very handy.
Of the sites listed, Fawnt is probably the easiest and most fun to browse. It has a comparatively limited selection, but you use a very simple JavaScript interface to move up or down the list twelve at a time. There are less than 100 fonts available, but they’re all readable and high quality. That is, no wild handwriting and dingbats that you’d probably never use outside of your experimental personal site. If you want to be sure to get something professional and moderate, Fawnt is a great idea.
exljbris is a professional font foundry, not a font directory, so of course the volume of fonts here is a lot less than elsewhere. However, everything is very well done, with proper attention to kerning and all that jazz. No Comic Sans derivatives here.
Another big one. I’m not sure if they put a cap on the number of fonts so that there are exactly 1001 and no more (doubtful), but in any case, there are plenty here. You’ll probably start to notice overlap with other font sites after a while, but that’s to be expected, since a lot of font designers would submit their designs to multiple directories.
Like exljbris, Floodfonts is a professional resource (one guy, Felix Braden). His fonts are a bit more experimental, with more flourishes and exotic tendencies. Great place to go if you’re looking for a font that’s probably not all over the web already. On an unrelated note, he has quite a few nifty navigation animations scattered around.
Fontleech is a blog. No fonts are hosted here, but there are frequent posts with reviews of new font packs available on other sites. The site itself is styled very sparingly, reminiscent of I Love Typography. Fontleech is nice if you want to keep track of the font community as a whole.
One thing I type a lot when writing new CSS is the following:
#some_element { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
I just clocked myself, and it took me 20 seconds just to type those properties initially.
If I have rounded borders on many unrelated elements, this quickly gets very tedious, not to mention that I often end up changing the border radius multiple times during the course of development. Every time I do, I have to change the pixel value for every single one of those items.
Really, these values should change together. No typical scenario would require that Safari’s borders be more or less round than Firefox, or vice versa. That’s where TextMate snippets can come in handy.
Fire up TextMate and open the bundle editor menu by typing ctrl+alt+command+B. Scroll down to the CSS area, and click “Create New Snippet” at the bottom arrow. Type out the CSS from above, except wherever you see a 5, replace it with ${1:5}. The $ symbol represents a tab stop, and the 1 means that these values will always change together. Another good practice is always putting a $0 at the end of your snippet so that you can quickly tab to the end and continue typing without needing to scroll.
Finally, we need a good shortcut name for this snippet. Next to tab trigger, type “br”. Now, whenever you type br+tab, you’ll get that entire line, defaulting to a border-radius of 5px. If you hand-code a lot of CSS, this will save you a lot of time. Other good candidates for snippeting would be the new, tediously long CSS3 properties like text-shadow, box-shadow, and the like.
You can see this and other snippets we’ve accumulated on Snipplr.
Rounded borders are one of those things that are so common, it seems slightly ridiculous that you should ever have to fire up Photoshop and slice up little images. Luckily, Safari and Firefox already support rounded borders.
That’s why when CSS3 is finalized, it will fully support rounded borders. Until then, Firefox and Safari helpfully recognize specific CSS rules. Let’s say you want all paragraphs on your site to have a border radius of 10px (larger radii mean a more rounded box). You would simply create the following rule in your stylesheet:
p {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Whenever Firefox or Safari users see your style rules, they will render your boxes as desired. The -moz properties apply to Firefox, and -webkit applies to Safari and the iPhone.
The great thing is that if you’re indecisive and decide from day to day that a 5px border radius is better than a 7px border radius or vice versa, you can change the style immediately with a few keystrokes. Plus, you don’t have to do all sorts of breakage-prone tricks if you need to change widths or anything like that.
If you ever feel like having a circular box, all you have to do is make your box a square by giving it a fixed width and an equal height. Then set your border radius to half of the box’s dimension. Actually, anything larger than half will also work, but instead of creating a cool flower shape, the browser just scales the radius back to half the box width. Here’s what I mean:
p {
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
background: #222;
color: #ddd;
width: 300px;
text-align: center;
}
One thing you’ll notice is that the text inside the box isn’t actually aware of the curved boundaries; it still obeys the box model. I think CSS3 will introduce a feature for wrapping text around curved boundaries, but I’m not sure if there’s a workaround with current CSS. Any ideas?
I recently started making a flashcard application for language learning. It’s in the very early stages, so right now I’m just using it to practice my Chinese characters. The Word model has three significant fields:
English, so I know the definition (US input)
Chinese, so I recognize the character (Zhuyin or Pinyin input)
Pinyin, so I know the pronunciation and tones (US input)
Now, the annoying thing about that is that I can’t type Pinyin in Pinyin—the word is automatically replaced. So I’m stuck typing the alt key plenty of times and doing all kinds of pinky acrobatics to reach the falling accent (on a Chinese keyboard, the falling accent is on the tilde key).
I decided that it would be a lot quicker to simply adapt the ghetto technique, which is to type vowel1, vowel2, vowel3, vowel4 to indicate the tones. So, for example, hǎo becomes ha3o. This is very quick and easy to type. The only problem is that it’s ugly to read, and poor readability is no good when trying to learn a language.
The easy way around this is with a simple before_filter in the Word model. It looks something like this:
class Word < ActiveRecord::Base
before_save :replace_pinyin
@@replacements = {
'a1' => 'ā',
'e1' => 'ē',
'i1' => 'ī',
'o1' => 'ō',
'u1' => 'ū',
'a2' => 'á',
'e2' => 'é',
'i2' => 'í',
'o2' => 'ó',
'u2' => 'ú',
'a3' => 'ǎ',
'e3' => 'ě',
'i3' => 'ǐ',
'o3' => 'ǒ',
'u3' => 'ǔ',
'a4' => 'à',
'e4' => 'è',
'i4' => 'ì',
'o4' => 'ò',
'u4' => 'ù',
}
def replace_pinyin
@@replacements.each do |key, value|
self.pinyin.gsub!(key, value)
end
end
end
Now, before the record is saved, each ugly vowel in the Pinyin field will be replaced by the more readable version. And that’s it!