How To Spice Up Your Blog Posts
Lets face it – no one likes to read a page of plain writing. Unless you’re reading your favourite paperback book – you’ll soon be bored. In this Tutorial, I’ll show you how to easily improve the look of your Posts. The simplest most effective way to do this is to add text styling to break up the post. Lets take a look at how..
1. Start by heading over to Font Squirrel and choose some fonts. Whats great about FontSquirrel is that they provide free pre-made font-face kits, meaning minimal coding is required.
For this example I’ve chosen ‘Folk’ and ‘Jr Hand’.
2. To keep things tidy, create a fonts folder within your theme directory. This is where you’ll store all the fonts you use for your posts. Extract the zip folders you’ve downloaded from FontSquirrel, and upload the woof, eot, ttf and svg files into your new fonts folder. These four files (per font style) cover all the major web browsers, so offer a uniform viewing experience for all your readers.
Thats the prep work done, now lets look at the coding you need to add to your stylesheet.
3. You’ll find each of the folders you downloaded contain a stylesheet.css file. Within this contains the code needed to call the font styles.
Add these snippets of code to your themes style.css stylesheet. You’ll need to be careful here and ensure you add the ‘fonts/’ code before each of the src url definitions, as you’ll be pulling the font files from the fonts folder, whereas fontsquirrel assumes the stylesheet and font files are in the same folder.
4. Now you’ve completed this, all thats left to do is create a new hook to call these fonts whenever you need them. Add a class definition in your stylesheet to define the font and give it a unique name:
5. With this all set up, you can easily use these fonts in your posts by calling the hooks you’ve defined. In the example below I’ve created a list with my top three favourite social media networks.
Code:
Result:
My 3 favourite Social Media networks
1. Twitter
2. Facebook
3. StumbleUpon
Without Font Work:
My 3 favourite Social Media networks
1. Twitter
2. Facebook
3. StumbleUpon
Summary
You can clearly see that the result is much more visually appealing and draws more attention to the point. Use of this kind of post styling is great when used as headings to split up content or to draw a reader to a particular heading in a post. The availability of fontface makes this example much more flexible and a great 5 minute addition to any plain looking blog post!
