I’ve been looking for a way to reduce the lighten a page template for a site I’ve been working on. Because I also want the page to look good on high-dpi screens, I’d originally coded it using @media queries in the CSS files to serve 2x images of multiple logos and icons to devices with those screens.
For some of those icons, I had discovered FontAwesome, a great icon font that’s designed for use with Twitter Bootstrap, the framework I’m using in this case. It’s fonts scale infinitely so they look great on any device, unlike Bootstrap’s current default icons.
But wouldn’t it be great if I could build my own font and include logos and icons specific to this particular site, whereupon I could dump all those 2x images and network requests?
While there’s a few tutorials out there, this one at tuts+ worked perfectly for me, and offered the best documentation. I won’t repeat it here so go read through it yourself. It’s required reading before proceeding. There’s a few caveats I found though, so I’m going to offer some tips here though that will make your life easier if you decide to give this a try. Specifically:
- Consider your legacy IE support needs
- Don’t use ligatures
- The artboard doesn’t have to be square
- Keep the file lean
The details:
Consider your legacy IE support needs
I’m coding for IE8+. You may be able to get this to work in IE7 and possibly even IE6, but that’s beyond the scope of this post. Which leads to:
Don’t use ligatures
They’re not supported in IE8. Besides, your font will work just fine without them.
The artboard doesn’t have to be square
Very important one here. The logo I was working with was long and not very tall. If you create it in Illustrator and leave whitespace at the top and bottom, it will affect the spacing of objects around the logo when you use it on your site. I made all my graphics 1024px wide, but reduced the height of the logos so this wouldn’t happen. In Illustrator just start with a 1024 x 1024 square, fit you logo/icon in it as big as it will go, and then File > Document Setup > Edit Artboards and crop out the whitespace on the other sides of it. It doesn’t matter if some of your glyphs are square and others rectangular, just keep the maximum dimension of one of the sides consistent – in my case at least one side was 1024px.
Keep in mind:
- The svg file you’ll be saving can be black and white only, no colors or shades
- White areas will be treated as transparent, black areas will show as your icon/logo and will be style-able with CSS.
Another tip: if you’re working with multiple paths in Illustrator, select them all and Object > Group before you save them so everything will render correctly. Then Save As > Format: SVG and repeat for anything else you want to add to the font.
Update: If you create a logo using text in Illustrator and you keep getting a black box when you import into icomoon, you may need to do one of the following to get the text to cooperate:
- Right-click the text and select ‘create outlines.’ Then select all your text and Edit > Compound Path > Make to combine them into a compound path.
- Select the lettering and background and go to the pathfinder palette and choose the ‘minus front’ shape mode.
Now go to IcoMoon and fire up the web app.
Keep the file lean
Import your icons. In my case, they also had FontAwesome icons in their icon library, so I added these as options and chose just the ones I needed, which keeps the file size even smaller. When you’re done adding icons, click the Font button. In the preferences enter a name for your font, and I recommend choosing the ‘Base 64 Encode & Embed Fonts in CSS option (more on that in a moment), and then download your font.
Unzip the download. The file that you get contains an index.html file which you can open in your browser to see your font glyphs. You’ll notice that there are CSS class names that you can use if you wish, which I found helpful, since I had already been using this convention with FontAwesome. No need to change any code for those icons at all!
Rather than have to load your font file separately, you can choose to embed your font in your CSS file, which saves a network request. Copy the style.css file and paste it into the bottom of your CSS file.
IE support note: I modified the @font-face declaration slightly for better IE support as follows:
@font-face {
font-family: ‘yourfontname’;
src:url(‘/pathtoyourfontfile/fonts/yourfontname.eot’);
src:url(‘/pathtoyourfontfile/fonts/yourfontname.eot#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */}
Here’s some further reading on why that works.
Now just call an icon class where appropriate and add CSS classes or ID’s to control font size and color, etc. and you’re good to go. Now, instead of having different size logos for different placements, or a separate images for rollover effects, you can just change the size or color with css!
For my page, I realized a reduction of over 100mb of images (including rollover images and logos at 2x size) and 30+ possible network requests, depending on the device. The CSS I added to my stylesheet was only 27kb. Nice!
Of course, the death of Polaroid’s instant film at the hand of the digital revolution is well documented. Many a photographer was saddened at this change, myself included. There was something wonderful about holding a one-of-a-kind print in your hand within seconds of taking it. So you can imagine that I was excited at the prospect of the new Polaroid Pogo printer, a tiny portable printer that can produce 2″x3″ prints in seconds directly from a digital camera or compatible bluetooth equipped device. 
