,

Geeky Tools: FontIcons – Custom Font Kits for Your WordPress Site

A brand is nothing without personality.

One of the easiest ways to mix it up and show a little personality on any site, including your business site is by using fonts. You can easily use a Google Font in your site, or embed a custom font, but few things imbue more personality than going just that little bit further and playing with an icon font.

Icon Fonts like Font Awesome allow you to Present a Visual Message Efficiently

Font Awesome rocks! The problem is that Font Awesome has over 300 icons included – awesome to play with, but overkill for most sites! And most people go to the trouble to embed them and only use them for their social media icons – or to head up a services section on their site.

And that’s sad, really. Because until Fonticons, most WordPress folks embedded the whole font library. All those icons sitting unused! Not only that, but what a waste of resources and load times!

Not only that – but you saw how many sites are using Font Awesome? That’s a lot of folks sharing a lot of the same design elements on their site.

With Fonticons though, you can go one step further – you can easily pull in your own custom icons too. That makes this a geeky resource that is very useful and full of awesome sauce!

Fonticons is pure awesomeness for those of us who like geek out over icon fonts …

Dave Gandy, the icon design genius behind Font Awesome and one of the guys behind the scenes at Fonticons, summed up the benefits of using Fonticons with a tongue-in-cheek “… the message is ‘icon fonts are awesome!’”

I was pretty excited to dig into all the offerings, and I have had a lot of fun playing with my first custom kit. But I am a curious Kat – I wondered how the idea for a service like this was started. I was especially curious about the actual process of putting a custom font together. And the geek in me couldn’t resist thinking about the effect this would have on load times (important things!).

Gandy’s background as a designer and his experience with Font Awesome helped him see a need for something beyond the Font Awesome icon font library. Like most web designers, he knew the pain of integrating good icons in a website:

A bit over 3 years ago, I was complaining about how much of a pain it was to put good icons on a website. PNGs, sprite maps, CSS backgrounds, and waaaay too much time in Photoshop. So I made Font Awesome and open sourced it. It’s now on 33 million websites and growing at a considerable rate. But it’s not perfect. What if Font Awesome isn’t the exact look your site needs? What if you want to add your own icons? So we made Fonticons so people can get the perfect icons on their website.

~ Dave Gandy, Creator of Font Awesome and other icon sets, and one of two guys behind the awesome Fonticons

Wow. 33 million sites and growing daily – that’s the kind of impact Gandy’s Font Awesome has had on the web design community. That’s staggering! That totally deserves a tweet:

[bctt tweet=”33 million sites and growing daily – that’s the kind of impact Gandy’s @FontAwesome has had on the #webdesign community.”]

Considering that Font Awesome is one of eleven fonts available within Fonticons, the kind of impact and potential of such a tool is really mind-boggling! Fonticons (pronounced like emoticons with a font for the emot *grin*), is an exciting new tool for sure!

If you weren’t sure of just what the potential this kind of tool could have, let’s break down the benefits.

With Fonticons…

  1. You aren’t limited by one massive library of font icons (I LOVE Font Awesome but it’s a big bite of code!).
  2. You don’t have to worry about dozens of little images, whether they are low-res, blurry and horrible to look at.
  3. You can say goodbye to sprite maps (believe me – I’d celebrate over that one all by itself!).
  4. Use CSS instead of Photoshop for styling – your site load times will thank you!
  5. Speed up your site by integrating JUST the icons your site needs (or wants!)
  6. Use Fonticons’ Global CDN for lightening fast load times and integration into your site!
  7. Dude! You can copy and paste your own icons straight from Illustrator CC! That deserves an

Convinced of the Awesome Creds and Potential Behind Fonticons?

Then how about we dig into how it works so you can see just how easy it is to build a kit to use?

I’ll show how you can add a little bit of personality in an awesome, non-overwhelming kind of way.

the coolest thing since sliced bread …

So, you know how absolutely I think is, right?

Okay, okay … I HAD to play a little! Ready to get serious with me?

A Brief Introduction to Fonts

So you’ve heard of fonts, probably even know what Google fonts or other custom fonts are all about. Maybe you’ve tried your hand at embedding them in your WordPress site? A font for consistent typography throughout your blog – as in all the headers, all the body text, etc – is a little different than the kind of font we’re going to be looking at.

The concept is the same – but if you aren’t familiar with font icons this will seem like a very cool new idea to you. (And if your geeky little heart knows all about it, wait ’til I blow you mind with the specifics of this tool!)

Icon fonts are for highlighting, expanding and illustrating ideas in a visual way. They’re like the cherry on top of your ice cream cone.
[bctt tweet=”#Icon fonts are like the cherry on top of your #typography – they highlight, expand and illustrate ideas in a visual way. “]

Getting Started with Fonticons – Start small and Grow

To get the most benefit out of Fonticons, you need to consider what you want to use an icon for on your site. Social Media icons? Post format icons? Category icons? Extra design elements? Personality?

Think about what icons you need, and then you can use Fonticons to build the kit you need based on what you want for your site.

That’s it for today – while I wanted to go over the actual how-to of using the Fonticons site, that will have to wait for tomorrow. Otherwise this post is likely to turn into a short book!

Watch for the How-To Fonticon post tomorrow, and I already planned to followup with a WordPress How-To on how to integrate Fonticons in your site properly (there’s a little bit of code and geekery there!)

In the meantime, check out some of the things you can do with Fonticons:

Go up to the logo in my header and you can see a three-piece logo for Kat’s Media. I put it together to test out Fonticons and to play with transitions and hover effects in CSS. You like?

My logo is tame compared to the Fonticons one. I did a quick screen recording of the hover effect – see what you think!

While you couldn’t miss the icons sprinkled in this post – check out the home page of my site and see another simple example – the briefcase midway down the page and above my services? Inserted with some fun Fonticons and a tweak to my CSS.

Curious about Fonticons or integrating custom font icons in your site? Let me know any questions you have – I’ll make sure to address them in the next post.

 

18 responses to “Geeky Tools: FontIcons – Custom Font Kits for Your WordPress Site”

  1. Lorii Abela Avatar

    This is an added knowledge as a feature of the WordPress site. I look forward to learning the applicability of it.

    1. Katrina Moody Avatar

      I will have it up soon! ๐Ÿ˜€

  2. Meghan Monaghan Avatar
    Meghan Monaghan

    Hello, this is my first time to your site and it\’s beautiful. Your personality certainly comes out. As a WordPress web designer as well, I\’m a little shy when it comes to fun fonts. I\’ll definitely use Google Fonts, but I get concerned about responsiveness with certain fancy fonts–especially on cell phones. However, I\’m intrigued with FontIcons, so I\’ll take a look. Thanks for the recommendation!

    1. Katrina Moody Avatar

      Meghan – I feel your concern when it comes to mobile display – that\’s one reason I really do love Fonticons in this case – it means a much smaller file to download while still keeping that consistency across different viewing environments.

      I know the custom font I\’ve pulled in for my headlines is embedded via MyFonts and it is, so far, working well across different responsive sizes, but I\’m still testing that out and trying to decide if I need to adjust some of them at the smaller screen sizes to save on needing the resources, and of course then you get to filters and functions that help you control when to actually load that resource. My geeky brain just smiled ๐Ÿ˜€

      Thanks so much for commenting! (also, love the fact that you\’re designer as well – love to connect with lots of my peers in this arena! Send me a friend request on FB if you want!) ย  From: \’>Kat\’s Media Sent: Thursday, May 21, 2015 06:08 PM To: katrina@katsmedia.com Subject: Please moderate \”Geeky Tools: FontIcons – Custom Font Kits for Your WordPress Site\”
      Kat\’s Media There is a new comment to moderate from Meghan Monaghan. In reply to: Geeky Tools: FontIcons โ€“ Custom Font Kits for Your WordPress Site. Meghan Monaghan (meghan@smartbirdsocial.net 73.132.20.56 | c-73-132-20-56.hsd1.va.comcast.net )

      Hello, this is my first time to your site and it\’s beautiful. Your personality certainly comes out. As a WordPress web designer as well, I\’m a little shy when it comes to fun fonts. I\’ll definitely use Google Fonts, but I get concerned about responsiveness with certain fancy fonts–especially on cell phones. However, I\’m intrigued with FontIcons, so I\’ll take a look. Thanks for the recommendation!

      Reply, Approve, Trash, or Spam? Approve and Reply: Reply to this email with your response to both approve this comment and reply to it. Approve: Reply to this email with a blank message or the word approve. Trash: Reply to this email with the word trash. Spam: Reply to this email with the word spam. ย  ย  Sent from Kat\’s Media. Delivered by Postmatic.

      ย 

  3. Katarina Avatar
    Katarina

    Seems like an awesome tool. Thanks for the tip here.

  4. Beth Avatar

    I\’m in the process of transferring my website to another host so I will definitely be looking into your suggestions once everything is done…thanks!

  5. Delia @ Happy Blogger Plaza Avatar

    Heard about and used Google Fonts but not Fonticons so far. I\’m curious if it can slow down your site, Katrina?

    Looking forward to read the new post where you explain how to actually use them!

    1. katmoody Avatar
      katmoody

      Delia — Planning to post it tomorrow – ran into a snag because of kid stuff that came up ๐Ÿ˜€ GREAT question! One of the ones I specifically talked with Dave about too!

      Basically – I did some basic comparisons and if the Fonticons guys are into the idea of it I\’d love to do a controlled test on load times as well. Basically if you already use Font Awesome on your site, you\’re loading over 300 icon fonts and a whole lot of extra CSS fun that is part of the default Font Awesome kit – most people use a central CDN-available option so it\’s fast-loading, just bloated for most basic site needs. The majority of sites drop down to loading just the icons they need (and you can republish your kit so you can make changes at any time) … Dave told me that the average comes down to 20 icons or so embedded in a custom font, plus you can cut out any of the CSS effects you don\’t use, including stacking, transition and other effects – you end up cutting up to 95% or more off the size in comparison to the regular Font Awesome library (which a lot of themes are enqueuing already!

      Stay tuned for the third part specifically though, as I\’ll go over some of the WordPress specifics, including functions that help incorporate the font the WordPress way (via registering and enqueueuing the script). I\’ll also share the specific code to de-register and de-enqueue or delete from your theme\’s function file references to other font libraries. What it comes down to is controlling not only HOW you integrate it within your site, but whatever else you can cut out of your site\’s load time as a bonus. ๐Ÿ˜‰

  6. Michael Kawula Avatar

    Seems pretty cool. Always good to spice things up a bit to keep it interesting.

    1. Katrina Moody Avatar

      Spicing it up is how to show you\’re a real person ๐Ÿ˜‰

  7. Beverley Golden Avatar

    Love your enthusiasm for Fonticons and it sounds like you are also have FUN exploring it. We used an embedded font in my site theme, although this would have been a lot of fun to have access to. For now, with all the continuous other issues my site has, I am very happy when everything is working as well as it does and my site looks clean and beautiful as is with lots of custom designed everything! Fonticon definitely offers the way to bring some personality to your site! Looks great and appreciate your sharing!

    1. katmoody Avatar
      katmoody

      Beverly – Thank you! I wish I\’d known about this awesome tool a while back as well – my geeky heart fell in love at first try! ๐Ÿ˜€ When we use custom fonts on our sites, I think it gives us an added way to stand out, show a little personality, and in general rock our sites! The heading font I use on this site is called Tulipan and it\’s a premium font I fell in love with and customized for my logo, so being able to use MyFonts to embed it directly into my site was a no-brainer for me! What font did you add on your own site? Did you use Google Fonts or a service like MyFonts instead? Totally curious!

  8. Kristen Wilson Avatar

    Your inner geek surely came out… I see your excitement and the fact that I know you kept me reading.. it\’s cute actually… your giddy geekiness! LOL This is cool… but how can \”normal peeps\” use it? ๐Ÿ™‚ Great job on this, being in the blog Wed and getting your site up and running… looks fab and it will just get better!

    1. katmoody Avatar
      katmoody

      That\’s just the thing – it\’s so easy to use that normal peeps can use it really easy! Today\’s post will go over the actual how-to and basics, with a WordPress followup ๐Ÿ˜‰ And yes – I guess my geek was showing ๐Ÿ˜€ Thanks for commenting and stopping by Kristen!

  9. Coach Natalie Palombi Avatar

    1. I\’m in love with your new site.
    2. These fonts are lovely!!!!
    3. Did I say I\’m in love with your new site???

    1. katmoody Avatar
      katmoody

      Aw thank you! I played on the fonts – I have a Google font called El Mukta as the body text, which is a nice slab font that pairs really nicely with the script font I am using. That font is a premium one called Tulipan and I\’m with you – I just totally fell in love with it! By pairing those fonts with the iconset I\’ve customized as more of a sketch-y, informal one … well it\’s totally me ๐Ÿ˜‰

      Thanks so much for commenting!

      ps – if you think you might want to play with Fonticons, the how-to post is tomorrow with a special followup post just about integrating it within WordPress correctly. ๐Ÿ˜€

  10. Carol Rundle Avatar

    I love how you love this, Kat! I have no special fonts on my site, it\’s probably boring, and you\’re inspiring me!

    1. katmoody Avatar
      katmoody

      Well – boring has a bad connotation. How about we say it\’s something you\’re going to play with and learn about ๐Ÿ˜€

      The actual how-to is tomorrow, with a WordPress followup to that about Fonticons. But I\’ll have lots more posts about pepping up your site in a safe way – stick around ๐Ÿ˜‰

      Thanks so much for your comment!