Why create custom Webfonts?
By now, you’ve probably heard all about the great benefits of using Webfonts on websites. If you are a web developer you almost certainly used products like Font Awesome or Symbolset to implement an icon font on your own site or used some of the free Google Fonts to make your site look unique and crystal clear in any resolution.
But what happens when you need to use icons that are not available in these fonts? How do you create your own icon font from scratch using your own custom icons and ensure that they render properly, no matter in which device you look?
This simple tutorial will answer those questions – providing some fundamental background knowledge as well as the specific steps to create your own custom icon font.
Creating your custom Webfonts
- Step 1: Go to the IcoMoon App and start by creating your account. Creating an account is an optional step but if don’t, you’ll lose all the work you’ve done when you clear your browser cache. An account is also useful if you work with a team and need to share your icon fonts with your team members or clients.
- Step 2: Create your first project. Go to the “Project Manager” in the top left menu and rename the title “Untitled Project” to that of your project and click “Load”. On this screen, you can also export (Download) and import your projects (configuration and SVG format). This is also useful, as you can use older projects as a starting point for a new one.
- Step 3: Add icons to your project. You can either pick some icons from the existing icons sets (either paid or free) or, more likely, import new custom icons from your computer. In order to do this, you need to upload an SVG (Scalable Vector Graphics) file. If you created your icons with Adobe Illustrator, Google Draw or any other format, you need to export it as an SVG file.
- Step 4: Export the project as a font file.By clicking on the “Generate Font” button at the button, you will be able to export your project as a Webfont (several, actually, one for each browser type) and the corresponding CSS file, containing the rules for importing the Webfont and adding icons to HTML elements. Under the “Preferences” screen, you can edit the settings of your font and configure metadata (important). On the center of this screen, you see all information to use your font (character to copy on your label, name of CSS class, etc).
- Step 5: Download the Webfont. After editing your icons and preferences, you’re ready to download your font. Simply Click on the “Download” button on the previous screen and a prompt for downloading a ZIP file will show up. In the ZIP archive, you have:
- Webfonts for desktop and mobile (fonts/*.ttf, .eof, *.svg, *.woff)
- Documentation in HTML format (/demo-files/demo.html)
- IcoMoon configuration for this font (/selection.json)
- CSS file with class for use in your webpages (/style.css)
I hope that this small project was interesting to you and you learned some useful things. It’s always enjoyable to create something valuable from scratch. By investing some small amount of time to build this CSS icon library we created a useful product that we can use over and over again.
Not only that but it also saves a lot of transfer time (when compared to using images for icons) and it also simplifies tasks such as specifying hover colors (no more waiting for the hover image to load) and, more importantly, since Webfonts are vectorized, icons can be scaled without losing quality or using large image files.