Fontastic.me – Font and Icon Source Tutorial

Creating a font or an icon is a clear concept. You have an idea, and you put it on proverbial paper. However, if you want to implement it on your page and like me, you have no training in doing so, you can be dead in the water. Luckily there is Fontastic.me, that will take off your hands most of the both tasks mentioned. 

Why Use Icon Fonts

There are always questions like: ”Why should I use this?”

Reason #1: It will save you time. You won’t need to open Photoshop each time you want to update an icon color or size, add an animation or shadow. You can modify that via CSS coding. It will speed up your website because you’ll include only those icons that you need, not whole pre-made icon packages with hundreds of icons you won’t use.

Reason #2: Icons are embedded as vectors so they look sharp and clean. And you won’t need to create special versions for iPad or iPhone. Fontastic is free, so you can use icons and fonts you have created in any commercial project, but read the licence for the icons collections form their library. If you want a little bit more, there is a Minicons Premium collections, that will unlock 1,532 icons for $78.

How-To Tutorial

After you log-in, it will automatically take you to the Fontastic library. In three easy steps, you can select what icons you want to download. First in ”Select” you can browse through more than 1700 icons available, divided in several categories. You select your preferred icons by simply clicking on them. Then you go to ”Customize” where you can customize character mapping and CSS class mapping for your icons.

They already have default settings, but if you want you can which character and CSS class name assign to each icon. You can also choose between2 different character mapping preference for your icons: basic latin or PUA. Final step is ”Download” which is self-explanatory. After you have downloaded your font package (named by default, untitled-font-1, at least in my case), you’ll see that there are various formats required by browsers: .ttf, .eot, .svg, .woff.

It also includes HTML reference page that shows all of your icons with code to paste in your page, and CSS stylesheet. When you want to install your font, you need to copy the ”fonts” folder into your website project. Copy the CSS code to your website stylesheet or add the CSS file ”styles.css” to your project and link it from your HTML page.

Creating and Uploading an Icon

When you want to insert specific icon, you’ll need to copy-paste the data-icon tag, or the CSS class name into any HTML tag. However, if you want to add your own designed icon to your collection, you can do that also. You can import SVG icons or fonts. If you upload an SVG font, all the icons in it will be imported and you can add up to 1000 icons in a collection.

After you do it, you’ll need to wait a few seconds to upload and after that, repeat the same steps from the beginning of this paragraph to insert them on your page. However, one of the most common problem is that your icon is ignored after uploading, or the icon appears empty. Solution is simple, you need to use Illustrator or any similar program. You just need to expand strokes, because Fontstic cannot import SVG with strokes.

If your icon is too small, check the artboard size, as the icon dimensions are defined by it. You should also check if there are any invisible shapes included on your icon, because when imported, it will be black and ruin your icon. Before the very end, I must mention that there is an option to delete your account on Fontastic.me. However, if you chose to delete it, you will loose ll the icons and icon fonts associated, so proceed with caution.

Fontastic.me is a great site if you want to implement your icons in your website. Library is big, so those who don’t want to, or don’t have nerves for designing icons, can simply download some from its big assortment. Personally, as my first contact with implementing fonts and icons, Fontastic was a great choice, so I bet that people with a bit more expertise, will find it easy as a summer breeze.