When comparing with Javascript methods like Cufón and Typkit, I mainly prefer @font-face embeds for it’s consistency (not even going to bring up Flash-based embeddings… wait, oops). I’ve found that when testing out fonts in tight areas like navigation and headings, Javascript methods tend to jump around a bit after the page has loaded, making things tricky to guess when margins and paddings are crucial. Font-facing, on the other hand has much less lag (with the exception of what Paul Irish calls “FOUT“) and also tends to render the same in all browsers.

So as I was building a theme for Posterous this past week, I used @font-face and everything looked fine locally. Font Squirrel even works some font magic to make IE cooperate with no effort at all. So I was happily moving along until I had posted everything online, linking to my assets and I realized that things looked great in every browser but Firefox. For reasons unknown to me at the time, Firefox would not show my embedded font. This was a bit of a surprise, so I spent a few minutes tweaking my links and making sure everything was right. This turned into a few HOURS of headache and frustration. I’ll spare you the horrors and just get to the juicy bits.

The Fox Fix

As it turns out, Firefox 3.5+ prevents cross-domain linking of font files as a security measure. What this means is that if you’re trying to link to a font from a different site, as you’re currently forced to do with services like Posterous and Tumblr (unless you use Typekit), it will work in every browser but Firefox. Thankfully, however, there’s a workaround. Font Squirrel can actually embed the font into the CSS using Base64 encoding.

What you’ll need to do is upload your font to Font Squirrel’s Font Face Generator and choose the expert mode.

Here are the settings that I used.

We don't need WOFF since Firefox is the only browser that uses it and we'll be embedding Firefox's font as a TrueType.

Font Squirrel makes an amazing little zip file for you with CSS and and example HTML file to get you going. With the Base64 encode you’ll have a super long file, but your fonts will work in all browsers. What I did was copy the CSS and paste it at the bottom of my main CSS file to help eliminate any possible errors and then changed the links to fit.

Hosting the Files

If you currently don’t have a server of your own to host the files, then the easiest solution is to use DropBox. You can put up to 2GB on Dropbox completely free and then link to the files in your theme. All you need to do is put the folders/files somewhere in your Public Dropbox folder, and get the link by selecting “get public link.” Then plug that into your theme/CSS file.

If you’re curious, the theme I made is still in the works for full Tumblr and WordPress compatibility, but you can check it out on my Posterous blog about Japan and missions at http://reedsinjapan.com

Posts and People that Helped Me

Adam Singer from Posterous gave me a big hand troubleshooting this.
Cross domain workaround for @font-face and Firefox
The article that showed me the error in Firefox’s ways
Other reasons I like Drop box.

Font gone bad!

Above you can see a styled font from a recent project we did that has been ruined by CSS. We embeded this font using @font-face (which is much more consistent than a js/flash embed). The image above is using the default H3 tag which likes to bolden things and ruin your great looking fonts. The quick fix for this is just to add “font-weight: normal;” to your CSS and you will get results like what you were looking for.

How the font should display

More Help:
You can find awesome font-kits for free from fontsquirrel.com

I followed the post’s advice and changed my cache size from 128K to 1024K and I saw a HUGE gain in performance. My RAM usage with the same file when down by nearly 1 GB when opening the same file (I generally deal with 40MB+ psds)! I am pleasantly surprised at this little trick and I’d encourage you to check it out yourself.

Here’s the original post.

A similar message for groups

So naturally, I googled for a fix and surprised to find no decent answer, I went back to trying something myself. What I realized was that this was the result of using the marque tool earlier and somehow improperly deselecting. If you happen to run into this problem, all you need to do is grab your marque tool (M) and select an area then delect. Or, you can go up to the Select menu, and click “deselect.” This solved the quirky little error for me. Let me know if it works for you too!

Let’s say you want to make a shape like this:

This simple little shape can't be cut out with a group, you must use a compound path

I’ll quickly show you how using a compound path, you can make it!

First, make a shape close to this using the pen tool or reshaping a rectangle

Now we need to grab the rotate tool and alt-click where the center of the circle should be. This should bring up the dialog box pictured below. Check the preview box to see where your shape will end up as you put in a number. I used the number 60 to end up with 6 shapes (360/60 = 6). Click copy to duplicate the shape into place.

Hint: use the copy button on the rotation tool to quickly duplicate your shape in a circular pattern

To speed this up and keep everything properly centered, just hit cmd/ctrl+D to repeat the copy until you have enough shapes.

Use cmd/ctrl+D to skip the menu

If you add a rectangle behind your shapes, you should have something that looks like what’s below. Go ahead and group the “rays” or “blades” together.

Now with both objects selected, if you were to hit the “intersect” button in the pathfinder panel (pictured below), you would be hit with a warning message.

With only your group selected, we can make a compound path by navigating to Object > Compound Path > Make.

Use cmd/ctrl+8 to quickly perform this step

Now before you hit intersect, my recommendation is that you first select the object in the back, and quickly hit cmd/ctrl+C and cmd/ctrl+F to paste a copy in front to intersect with. That way, when the shapes have been trimmed, you still have a rectangle in the back, like this.

Now throw a circle over your new shape, hit “Unite” in the Pathfinder panel, tweak the color a bit and you’re done! Sorry it’s not prettier, but hopefully you get the idea. If you have any trouble following this tip, or if you find it useful, please let me know in the comments!

This simple little shape can't be cut out with a group, you must use a compound path

1. 2GB of Free Online Storage

This is a biggie. If I had known this, I would’ve been using Dropbox months ago. Dropbox gives you a free no-credit-card-attached 2GB account for absolutely nothing. This is definitely enough to get you started and I am blown away they even give you that much.

2. Works On All Major Operating Systems

Windows, Mac, and Linux are all supported by Dropbox thus allowing you to synchronize files across computers and OS’s. The Mac version has worked flawlessly for me. In addition, Dropbox has browser access and an iPhone app. The iPhone app is pretty impressive too. It allows for offline access as well as uploading and deleting of files.

3. 250MB More Per Referral

Every time you get a friend to jump onboard, you get an extra 250MB of space added for free! So what are you waiting for? Sign up and give me 250MB of space!

Honorable Mention: File Sharing

If you need to share something publicly, just drop it in your public Dropbox folder, right-click and copy the link and send it out!

Rounded corners on Merig.com Firefox vs. IE

Currently, I am finishing up a design/development project for Meriwether Godsey, a catering company based here in Lynchburg VA and my current employer (until Feb 26). The design features a series of rounded boxes to feature all of their sidebar content as opposed to a “stacked blocks” look it had before. I had an interesting revelation during the development of this site. I came to my boss with the proposition of giving modern browsers the CSS to have rounded corners, knowing that IE would be forced to render the content as squared “blocks.” After showing her the proposed solution in both sets of browsers, she replied “that’s fine!” I was a bit stunned, but excited at the same time. My goal was to save development time and to ensure cleaner code while providing a nicer look. In addition, I was able to save the user precious seconds that they would spend waiting on another image to download.

Was It Worth It?

With the bulk of the code now done, I can ask myself “Was it worth it?” The answer is a resounding “YES!” Using CSS3 now saved development time, it got the boss’s approval, it saves the user time, and eventually Microsoft will catch up with the rest of the world and users will see these great-looking corners. In the mean time, it’s not a big sacrifice. The design doesn’t look bad in Internet Explorer, so it’s not a big loss. If you’re on the fence about jumping into CSS3, my suggestion is go for it! You’ll be glad you did.

Blog Question

I write these articles for you, the reader more than for me. I want everyone to benefit from what I’ve learned. So, my question is “Do you like a shorter format like this? Or would you rather see a more detailed article?” I’d really appreciate it if you let me know in the comments or on twitter. Thanks!!

A couple days ago on Twitter I made the statement that what Apple ”would announce [today] could change the face of the design industry.” After seeing the official announcement, I’m more confident than ever of that fact. Apple’s new device has the potential to make even more of an impact on those of us in the creation industry than the iPhone.

1. Jobs. No, not that Jobs, new positions

The number one way I see the iPad affecting these two industries is the creation of jobs. New positions will be created specifically for designing for this device. Much like there are designers for email marketing only and designers who specialize in iPhone apps, there will soon be the opportunity for a whole new platform to be designed for. But I’m not just talking a designer for an app or a game. I’m also saying that The New York Times, Time Magazine, and plenty of other companies will be hiring new designers to format their site and their content for this device daily. It’s extremely exciting!

2. Comic book subscriptions.

While not yet annouced, I predict that we’ll see nearly every major print media company moving quickly to this device, including comic book distributors [Edit: I found this site today. Looks like they're working on a marketplace for artists]. All comic book artists need to jump on this thing, especially those who produce their own content. Hopefully we’ll see the new iBook store open up to small companies as well as the big guns. To give you an idea of what’s possible, check out this youtube video by Sports Illustrated and image the possibilites.

3. A Transformed Portfolio

Scott Bourne has just done a quick article on how the iPad will rock photography.  He brings out the idea of handing over your tablet with a portfolio open. This could just as well apply to anyone with a visual portfolio. Handing an open laptop just doesn’t seem as graceful as giving someone a flat touchscreen device. They can view all of your artwork with you in a way that I think is far more intimate than even a laptop can accomplish. All the while, you are explaining each detail of your work.

Image Courtesy of Engadget

4. Finger Painting

Brushes is an app that’s currently available in the iTunes store for the iPhone/iPod that was demoed today during the Apple keynote and has been re-written specifically for this device. I think we’ll see many similar apps show up (Adobe has release a version of Photoshop for the iPhone) that will enable portable painting and drawing like we’ve never seen.

Image courtesy of Axiotron.com

5. Killing the ModBook and the Wacom Cintiq

The iPad is an ultraportable tablet. Right now, there aren’t too many artists who would willingly tote around a laptop and a tablet whereever they go. The only device on the market offering comparable portability is the ModBook. If you haven’t checked it out, I suggest you hurry before it becomes extinct. The iPad could potentially eliminate the need for a Wacom cintiq (drawing tablet with built-in screen) and save hundreds you’d spend on a ModBook IF it can support a pressure-sensitive stylus and someone makes it.

Am I Crazy?

What are your thoughts? Do you think I’m a crazy fanboy? Or do you see some potential killer feature that I’ve missed? Let me know in the comments.

Further Reading:
Some really good observations for designers
How iPad Affects the Way we Design Websites?
The Unofficial Apple Weblog did a nice write-up with more thoughts on comics on the iPad
“iPad in the family: What it’ll take”
Ivan has a similar write-up on creativebits.org that takes a different approach
“What Does the iPad Mean for Designers“

.some-class{
columns: 2;
}

but excited to see that it worked once I added
.some-class{
-moz-column-count:2;
-webkit-column-count:2;
columns: 2;
}


I just wanted to share that with you. I’m still tinkering around with the new site and I hope to add more features, posts and work very soon. Also, I received an invite to basekit, which is a new CMS/coding platform that is supposed to cut up your psd for you. I’ll give it a try and review very soon.

One last note, I stumbled across a great article on Smashing Magazine today entitled How to Support Internet Explorer and Still Be Cutting Edge. I enjoyed it so much, I actually retweeted it twice! It’s actually what turned me on to this wonderful bit of CSS3 and I would encourage everyone to jump over and give it a read.