A suggested fix for the dreaded FOUT

As a keen typography fan I tend to rely heavily on the use of web fonts for my sites. I generally use Typekit to deliver my fonts, but it does tend to take a little while for the browser to download and display my beautiful fonts.

I noticed that if I simply place the typkit required script tags in the header of my site, it will block my site from loading until the font(s) have been downloaded, leaving visitors with a blank screen for a second or so. With a fast connection it’s not the end of the world in my book, but recently I tried experimenting a little with how to minimize this inconvenience to the user.

First, I tried putting the typekit script tags in the footer of my document, instead of the header. This stopped the delay in the site from loading, but it also caused a ‘Flash of Un-styled Text’ (or FOUT for short), where the fallback font(s) were shown as the web fonts were being downloaded. This can look really messy, especially if you’re using fonts for which there isn’t really any suitable fallback.

It’s a common problem and I’ve seen a couple of solutions offered, but I came up with what I think is quite an elegant solution.

Typekit fonts are delivered via JavaScript that provide event listeners that can tell you whether a font is active, is loading, is inactive or has been loaded. Typekit suggest a solution on their blog at http://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/, but the loading of your site can still be delayed as you wait for the fonts to download and if you put the script tags in your footer, you can still suffer the FOUT. Blurgh.

My solution is to (and bear with me here before you scream ‘but what if JavaScript is disabled!’) hide all the text elements in my CSS by setting their opacity to 0, so as to completely avoid any FOUT. I do this like so:

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, span, a {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
}

Obviously you may well have more elements of text that should be hidden, such as blockquotes, cites etc. I’ve also added some CSS3 transitions, so that when the web fonts have finished loading they’ll fade in smoothly (this in itself is really quite a nice effect) rather than just being spat out! I then added the following to my CSS:

.wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4, .wf-active h5, .wf-active h6, .wf-active p, .wf-active ul, .wf-active ol, .wf-active dl, .wf-active span, .wf-active a {
opacity: 1;
}

The .wf-active class is added to the <html> tag of my document via JavaScript when the font has finished loading. If we set the opacity here to 1 then our web fonts will be displayed and not our fallback fonts.

The problem with this method is obviously that it relies on JavaScript. If users view the site with JavaScript disabled, the wf-active class won’t be added to the <html> tag and the fonts will remain invisible. My solutions is to add the following to my document head after our other CSS files have been included.

<noscript><style>h1, h2, h3, h4, h5, h6, p, ul, ol, dl, span, a {
opacity: 1;
} </style></noscript>

This will overwrite our previous declaration where we set the opacity to 0 and therefore make our fallback fonts visible to the user without JavaScript.

The other problem with this method if the Typekit fonts are not available, or if the browser does not support web fonts. In this case, you could also use the .wf-inactive class which Typekit adds to the <html> tag in either of these cases and set the opacity to 1 like so:

.wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4, .wf-inactive h5, .wf-inactive h6, .wf-inactive p, .wf-inactive ul, .wf-inactive ol, .wf-inactive dl, .wf-inactive span, .wf-inactive a {
opacity: 1;
}

As far as I can see this pretty much covers all bases, but I may well have missed something here and am very happy to have this pointed out to me!

Easy PayPal Custom Fields Plugin

I’ve just my first WordPress plugin that uses custom fields to make creating a PayPal button super-easy.

I wanted to learn more about PHP and the inner workings of WordPress and I also needed a solution for my clients to add PayPal functionality to their sites without having to remember complicated shortcode syntax. Whilst shortcodes in WP are a fantastic feature and are easy to implement for the developer, I find they can often confuse my clients who often can’t even find square brackets on their keyboards!

Having said that: In order to have full flexibility on the placement of this mystical button, you can select to insert it at the top or bottom of a post or – via a shortcode – anywhere you like in the post.

On the settings screen, the user can select on which type of post (including custom post types) the plugin should be displayed. It’s also possible to enter default settings which can subsequently be changed for individual posts where necessary – this might come in for sites with multiple users.

The button is also customizable with 2 themes to choose between (dark and light) with custom text for the button, or it’s possible to simply display a regular large or small PayPal button (either ‘Buy Now’ or ‘Donate’).

The plugin will encrypt your PayPal username so that it can’t be harvested for spam by the evil spam robots of Mordor.

This plugin is created for WordPress 3.x and currently only supports ‘Buy Now’ and ‘Dontate’ functionality. Download it via the WordPress plugin repository.

Please don’t forget to rate the plugin if you like it and if you feel generous enough to lend a few shillings towards further development I would be most grateful.

Update: I’ve managed to fix an issue where WordPress would suddenly remove the PayPal info attached to the post and the button would disappear. I’ve updated the repository with the fixed version – if you’re using an older version I strongly recommend that you update as soon as possible!

Screenshots:

The Options Page


Adding the button to a new post:


WordPress 3.0 custom queries, post types and taxonomies

There’s been a few really great articles recently published about the new custom posts features in the WordPress 3 Beta, most notably Justin Tadlock’s excellent article and an equally enlightening post on wpengineer.com. I’ve had some fun experimenting a little with the new possibilities opened up to me with this new functionality but I very quickly came up with a problem that took quite a bit of head scratching to solve, namely how to filter my query to a custom post type by taxonomy – akin to displaying all the blog posts within a specific category, I wanted to be able to display all my custom posts in my custom taxonomy (read category).

Using code grabbed from the above articles and the codex I had successfully created a new custom post type. Here’s the code for your functions.php file. As per the codex example, let’s call it ‘books’.

function new_post_type() {
register_post_type( 'books',
array(
'labels' => array(
'name' => __( 'Books' ),
'singular_name' => __( 'Book' )
),
'public' => true,
)
);
}
add_action( 'init', 'new_post_type' );

All of this functionality is clearly explained in either of the articles I mentioned (as well as a more detailed discussion of the various options – the purpose of this article is just to demonstrate how to perform a custom query on a new custom post type with a custom taxonomy.

Right, now I can retrieve my new post type by passing the following parameter to the query. This code should be placed outside of the loop (it’s a loop itself!) in whichever page you’d like it to appear.

<?php
$yell = new WP_Query(array('post_type' => 'books'));
while ($yell->have_posts()) : $yell->the_post();
?>

<h2><?php the_title(); ?></h2>

<?php the_content(); ?>

<?php endwhile; wp_reset_query(); ?>

Now, I want to add a custom taxonomy to my custom post type: I want to do is to be able to categorize books by genre. I can do this by adding the following code to my functions.php file:

function create_book_taxonomies() {
// Add new taxonomy, make it hierarchical (like categories)
$labels = array(
'name' => _x( 'Genres', 'taxonomy general name' ),
'singular_name' => _x( 'Genre', 'taxonomy singular name' ),
'search_items' => __( 'Search Genres' ),
'popular_items' => __( 'Popular Genres' ),
'all_items' => __( 'All Genres' ),
'parent_item' => __( 'Parent Genres' ),
'parent_item_colon' => __( 'Parent Genre' ),
'edit_item' => __( 'Edit Genre' ),
'update_item' => __( 'Update Genre' ),
'add_new_item' => __( 'Add New Genre' ),
'new_item_name' => __( 'New Genre Name' ),
);
register_taxonomy('Genres',array('books'), array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'genres' )
));
}
add_action( 'init', 'create_book_taxonomies', 0 );

Awesome – now I can add a new ‘genre’ to my books – this is akin to adding a new category to your posts. Let’s say that I now add 2 genres: ‘sci fi’ and ‘thriller’. I can now filter my query to query one of my newly created genres.

<?php
$yell = new WP_Query(array('post_type' => 'books', 'genres' => 'sci fi'));
while ($yell->have_posts()) : $yell->the_post();
?>

<h2><?php the_title(); ?></h2>

<?php the_content(); ?>

<?php endwhile; wp_reset_query(); ?>

At the moment it seems that you can’t filter the query further (as you can for posts) by adding an equivalent to:

'category__in' => array(2,6)

Namely:

'genres__in' => array(2,5)

Which seems – to me at least – a real missed opportunity (it never made it into the core, I’m told), but there may yet be some crafty plug-in authors with a work-around. Here’s hoping!

website 3.0

I’m delighted to welcome you to the third version of richardsweeney.com!

The typography is based on a few 17th century books that are important sources for my work with historical performance and that have kept me good musical company over the years. John Dowland’s ‘varietie of lvte lessons’ (published 1610) was of particular interest to me, the typography is beautiful, not to mention the music!

I had been planning to start writing a blog for a while now and having worked a lot with WordPress of late, it was really a joy to implement. I’m planning to blog about both music and design in equal measure, but I guess we’ll see how that pans out.

One thing I hope to do is to be able to give back a little to the online web design community. It’s amazing how open the community is, how willing to share knowledge people are. I have often wished that it were the same within the world of historical performance, which by comparison seems so closed. Perhaps it’s time for a historical performance Wikipedia? The whole area has, in my opinion, really stagnated of late – where are this generation’s pioneers?!

Anyway, that’s a discussion for another day. Right now, I’m planning to add some beginner tutorials in the aspects of web design I find most interesting and rewarding, namely jQuery and WordPress. I’m not an expert in either subject by any means, but I remember well what it was like to be a complete beginner and I’d love to help provide an easy way in for total noobs!

Watch this space… Remember – you can keep updated by following me on TwitterFacebook or by subscribing to the feed.

Callino Quartet Website redesign

I’ve just launched my redesign of the Callino Quartet’s website!

The original site was not in any way ugly, but it was a pain for the quartet to keep updated and looked a little dated. The code was butt-ugly and needed a complete overhaul. I used WordPress as a CMS (Content Management System) for the site and rewrote the code using standards compliant xHTML & CSS (with the exception of a few CSS3 additions) plus a little PHP and a dash of my absolute favourite javascript library jQuery. I also integrated a handy plugin that grabs a Google Picasa web album and displays it on the site.

callino quartet

It was, as ever, my goal to make the entire site updatable by the client. I’m pretty happy with the results and, more importantly, so is the quartet!

Check it out at callinoquartet.com.