Introducing Font Booyah (And How to Make A Custom Font)
Two of the concerns I have when uploading an image to a website is loading time (determined by the size of the image) and quality (determined by how I might need to resize the image). If an image is too small, for example, and I want to make it larger, it will lose quality. If I upload a larger image to play it safe, I’m impacting loading time. With the need to build responsive websites growing, the need for responsive images is growing as well.
I’m not going to cover images in general, but I am going to talk (or write) about icons. Icons are often used to add visual assistance to a word and in some cases replace a word. Users click on images to navigate through a website or to control certain actions. When an icon looks sketchy, the experience of the website feels sketchy.
You may have noticed that text tends to not run into this issue. Fonts, by nature, resize nicely on any size device. I won’t get into the technical details of that now, the thing I’m here to tell you about is icon fonts. An icon font is a set of icons that are rendered in the same fashion as text. This means that these icons should, in theory, be as scalable as text, which is – simply put – awesome.
There are quite a few font icon libraries out on the web today, one of the most popular ones is called Font Awesome. Font Awesome offers over 450 different icons, as well as rotating and animation options. It’s simple CSS and an actual font, so loading time is spectacular and scalability is great. This very blog, LaunchRiot, uses Font Awesome as well.
So what happens when the 479 icons Font Awesome offers are not enough? You have a few choices. Thanks to services like IcoMoon you can select various icons from various libraries and create your own custom collection. Personally I’m in love with a service called Fontello, which is very similar to IcoMoon. The video on the home page of Fontastic’s website, a service similar to IcoMoon and Fontello, does a phenomenal job at explaining the issue I outlined above.
But what about when all the free or premium font icon libraries in the world don’t have the fonts you need? If you have a program like Adobe Illustrator, or any other program that allows you to create .svg files, you’re in luck. You can upload your own .svg files to services like Fontello and they’ll convert them in to font icons for you!
I wanted a nice mustache icon, like the one you can see on my website. While making it, I went a bit nuts and ended up making 25 icons. The 25 I made are a combination of fun icons I have not seen in other libraries, things I enjoy (like comic book heroes and music) and things I love that are related to Israel (the tech scene and culture).
I’m currently calling the collection Font Booyah. It’s not really meant to be a stand-alone collection, since the icons are not inherently useful for a website or web app like the ones in Font Awesome are. But it’s a fun little collection and I think it compliments libraries like Font Awesome nicely.
You can use it for free, of course, and share it with whomever you’d like. I recommend not using the super hero icons in a commercial project because they are most probably registered trademarks of DC and Marvel, respectively.
Here is a preview of the 25: