In today’s terminology, a font generator helps us create fonts for web. But the fact is that there are three kinds of tools come up when you search font generator in Google.
I don’t know about you guys but I had difficulties finding my required font generator when I tried to find one.
Today we observe what this term font generator could mean. We also list the best font generators from all three categories right here.
You’ll also find tips for using your favorite font generator. And did I mention it’s all free!
So let’s kick off this article with the font generator type that is in demand these days.
Icon Font Generator
Background: In the early days of web, that is until a couple of years ago, whenever web designers required adding an icon anywhere in the web design they had to use an image. For instance, if they wanted to an icon on each of navigation bar option, they had to use images. If there are seven buttons in the navigation bar, then seven images had to be used in the navigation bar.
Problem: As you would know, images are not as flexible as text. They are resolution dependent, they are not easy to control with CSS. On cross browser testing, and cross device testing (computer, tablet and mobile phone) images can cause problems. They don’t mix well with text.
Solution: There was a font called Wingdings that was a part of Windows. It stayed a part of Windows until Windows XP came out. Then Webdings took over. So someone had the idea of using Webding’s dingbats instead of images. IT WORKED! But of course, it worked only for Windows based operating systems. But as CSS3 emerged, it allowed the CSS developers use nearly any font and the website visitor did not have to install that font to view it properly.
Now it web designers and font makers knew what to do. Font developers started creating dingbat fonts and web designers started to use them instead of icons and images.
But then another problem raised her head. The problem was that one dingbat did not have all the required icons. Of course it could not because one font cannot cater the needs of all kinds of projects and all kinds of web designers.
For instance, one web designer required social media icon font and another one required a horror dingbat font for a Halloween website, and another designer needed UI kit icons… and then there was a designer who needed all these three kinds of icons in one project! Will he have to use three different dingbat fonts? That will make his web page weigh two megabytes!!
It was soon realized that web designers will have to learn to develop icon fonts. But learning a whole new thing isn’t that easy, that’s not how the world should be.
Some application developers came up with the answer. They developed a font generator that allowed web designers to create dingbat fonts using vector icons. This was a giant leap forward.
Then someone had the idea of making this application run online. It was successfully developed. Then someone had the idea of making it free. And today we have free icon font generator working on the internet. In fact, we can find more than one. Let’s take a look at them.
This is a revolutionary font generator (they did not pay me to say this, OK).
The usage is pretty simple. It has a library of commonly used icons in web designing. What you need to do is you select the icons you need and click on download webfont. You get a tailor-made font that contains only icons you need. That means no unnecessary icons and no unnecessary kilobytes.
You can even use your own images/vectors in the font. Just upload your images in SVG format and they will be included in the web font.
It’s absolutely free.
Resources: Online Convert has a free online converter to turn any image into an SVG.
This is another absolutely free icon web font generator. Pretty much like Fontello, the difference is that it has a much bigger library of icons. The overall feel of tool is a little on the professional side. I guess if you are a professional, you will like this tool more than Fontello (see, they didn’t pay me, otherwise I wouldn’t have written this thing).
There are some similar tools in the market that perform the same font generation as these two I have already mentioned. I wouldn’t waste your time by listing them all here, these are the two best and free ones, no point extending the list. Now let’s move towards the second type.
Web Font Converters
Honestly, these ones should not be called “font converters” instead of “font generators” but if you google “font generator”, these things pop up.
As I mentioned above, CSS has powerful features for controlling fonts. But not all fonts, CSS needs web fonts. These are the fonts optimized for websites.
These font converters optimize any font for web. All you have to do is upload the font and this font generator, or font converter will give you a webfont.
This is the most credible font generator in this category. It’s been around for quite some time and many web designers from all over the world use it.
The description of this font generator will bore you. This font generator does exactly what the above one does and takes exactly the same time and gives you the exactly same results. So why you use this one you ask? Why use the above one? Just choose one, alright.
There are other font converters as well, such as font-face kit generator by code-and-more and font face generator by convert fonts, but since they also do the exact same thing, I did not make this list lengthy.
Bitmap Font Generators
I’m almost sure you were not looking for these when you opened this page, so I won’t take much time here.
A bitmap font generator is something makes you a font out of bitmap images. Not vectors, not SVGs but bitmaps. A common use for this kind of font generator is using it to convert handwriting into a font.
These fonts are most commonly used for Unicode character users.
This is a downloadable application.
A similar font generator is Angel Code’s font generator. You can choose whichever you like.
I hope you enjoyed the post. I put my effort in, please comment and make my effort worthwhile. Thanks.