WordPress Plugin : Typecase Web Fonts

Disclaimer: I’m not much of a fonts guy, but once in a while I just want to be.

I was reading the “Best Practices for Designing a Pragmatic RESTful API” article, when I realized I liked the font it was written in very much.  I liked it so much that I immediately wanted to have it on my blog too.  Chromium Inspector tool helped identify it as Ubuntu font family.

I have no problem editing WordPress themes’ CSS files, but I prefer to avoid it whenever possible.  So a quick Google search later I found this blog post, which describes how to customize fonts in the Twenty Fifteen theme, which is coincidentally what I’m using currently.

The blog post recommended Typecase Web Fonts plugin.  I installed it and started playing around with it, and I have to say it’s pretty amazing.  Basically, it provides a font search tool in the WordPress admin.  Once you find the font, it shows you the preview text and some font details.  You then add CSS selectors on which you want this font to apply.  It took me literally 3 minutes to figure it all out.  You can even add multiple fonts.  For example,  since now I had sans-serif font for the blog content, I wanted to use a serif font for the headings – boom! – and I have Roboto Slab font to compliment Ubuntu.

The plugin is so easy to use and is so handy that I think we’ll be using it at work now too.  Check it out.

Random fonts and colors for each WordPress blog post

Here is an interesting web design idea that adds uniqueness to the website : use a random font for post titles, and use random color schemes for each post.   To hell with consistency you say?  Well, apparently, being random is being consistent too.

Picked up the thought from this blog post.

6 great monospaced fonts for code and terminal in Fedora


Fedora Magazine covers “6 great monospaced fonts for code and terminal in Fedora“.  Their choices are:

  • Hack
  • Inconsolata
  • Source Code Pro
  • Fira Mono
  • Droid Sans Mono
  • DejaVu Sans Mono

It’s been a while since I considered a change to the monospaced fonts that I’m using.  The top three fonts in my list from a while back are Fixedsys Excelsior, Monaco, and Microsoft Consolas.  I used Fixedsys Excelsior almost exclusively in all my terminal windows.

Fitting and inflating text and videos with responsive web design

There are plenty of solutions around for scaling images. Text and videos on the other hand – not so much. Here are a few that are handy:

  • FitVids.js – a lightweight, easy-to-use jQuery plugin for fluid width video embeds.
  • FitText.js – a jQuery plugin for inflating web type.
  • Letterings.js – a jQuery plugin for radical web typography.

Font sizing with REM

Font sizing with REM

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the htmlelement and define all rem units to be a percentage of that.


You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

How to add Google fonts into your WordPress

How to add Google fonts into your WordPress

Use Google to generate the CSS for the font, then include it using wp_register_style() and/or wp_enqueue_style() WordPress functions.  This should probably be generalized to accept font name parameters, as well as probably moved out into a plugin.

Programming fonts

Once a decade or so I get to review my Vim configuration, which also usually brings my attention to all the things surrounding – bash, terminal, etc.  This time around I wasn’t looking for anything in particular, but somehow I stumbled across the Top 10 Programming Fonts.  Of course, this one of those lists that will vary from person to person, but given that I am not particularly into fonts, I thought I’d just try the ones recommended and maybe switch my day-to-day font to something better.

Gladly, these days, trying TrueType Fonts on Linux is really easy.  Many are available directly through package management.  The ones that not, can be simply downloaded into the fonts folder (/usr/share/fonts or  ~/.fonts or whatever your distribution supports).  Trying out the fonts from that article, I arrived to these conclusions:

  • Inconsolata is going to be my font of choice for now.  It’s quite different from everything I’ve been using until now, in particular, it’s much thinner.  But I love how easy it makes distinguishing zeros from upper O’s and ones from lowercase L’s.  Bonus points for being available through yum install levien-inconsolata-fonts.noarch .
  • If Inconsolata weren’t easily available, I’d go with Droid Mono.  Which is available through yum install google-droid-* .  It’s very easy on the eyes, even if it doesn’t differentiate 0/O and 1/l so well.
  • I would have never chosen Monaco – even though it’s easy to try. I find this surprising, as I though Apple were very picking about their fonts.  Maybe they are.  But Monaco is hard on the eyes.  I’ve opened a couple of screen of ugly code and my eyes nearly bled from lack of space and the amount of curvy edges.  To each his own though.
  • Microsoft’s Consolas is a good font and I remember trying it out before.  But given that it’s not that easy to find around and install, I decided to completely ignore it this time.

What’s your favorite font for programming?