Building innovative communications solutions for the health sector

We’ve just been updating the design of one of our client’s sites and, as ever, fonts are a focus. Earlier this year, Google released a set of beautiful typefaces for use in web environments. It’s a simple matter of calling the font library from Google via a stylesheet header. Unless your choice includes Droid Bold.

Even easier, if you are using WordPress as a CMS, there are plugins available to implement the Google font API without much fuss. This approach gets you going very quickly and it’s very handy for look-and-see building.

But for a production environment, I don’t like the mess it begins to create of your stylesheet set. The plugin simply adds your styles to each page’s header which isn’t very elegant. We’ll soon be looking to incorporate the relevant css within the stylesheets proper rather than layering plugins on top.

The older design focused on Arial

Our implementation in question is for Nottingham University Hospitals Trust R&D. Here, the site is run using WordPress using an old but very solid theme called The Morning After. The theme itself has long since been taken over and incorporated into a commercial supplier’s portfolio. We’ve kept with the original theme and have slowly updated it to suit our needs over time.

The redesign involved some font size changes and text colour modifications along with the big shifts which were to Google’s Droid fonts. These look beautiful and there’s a large family to pick from, including a serif set. Whilst Droid fully modernises the look compared to the previous Arial, we recoloured and resized front page headlines to match those at the BBC website. This helps deliver a familiar user experience. We also softened the body text to a mid to dark grey which makes reading less tiring on the eye and allows us to use darker greys for block quotes and other text emphasis.

There are some tweaks to come, especially amongst the internal pages but for now we’ve achieved a fresh contemporary look with relative ease… except for an evil little bug. If your chosen font is Droid Bold. Of course our chosen font is none other. For some undetermined reason, many browsers except Google’s own Chrome are not calling the font properly. There’s a work around suggested by Alexandre Paquette over at Google Code

I found a way to fix this issue. By saving a local copy of the .css generated by de webfont directory, you can change the web font name defined in your css. for example, you can change “Droid Sans” for “Droid Sans Web”.

Bear in mind this will only happen if you make the local version that Alexandre mentions a priority; ie it has to be called before Droid Sans:

Put this in your stylesheet:

@font-face {
font-family: 'Droid Sans Web';
font-style: normal;
font-weight: normal;
src: local('Droid Sans Web'), url('http://themes.googleusercontent.com/font?kit=rS9BT6-asrfjpkcV3DXf__esZW2xOQ-xsNqO47m55DA') format('truetype');
}
@font-face {
font-family: 'Droid Sans Web';
font-style: normal;
font-weight: bold;
src: local('Droid Sans Web'), url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMQJKKGfqHaYFsRG-T3ceEVo') format('truetype');
}

Then decide where it’s going to operate like this:

h1{
font-family: 'Droid Sans Web', 'Droid Sans', sans-serif;
}

Ta-da – all your browsers will now show Droid Sand Bold almost properly. Almost? You’ll find that the strong tag doesn’t work consistently, leaving such things resolutely not bold for some browsers.

I haven’t noticed any overhead in making this external call but to be sure you should have alternative fonts specified, or at least specify a default sans-serif or serif as above; just in case there’s a connection problem.

An alternative is to host the fonts yourself. Defeats the object of using the Google API, but this is what you do:

1. Go to Font Squirrel’s Droid Sans section
2. Download the @font-face Kit. Make sure you check off each format so that all browsers are catered for
3. Upload the font kit to your own website so that they are then served locally rather than directly from Google

So, a spoiler workaround to an otherwise tidy idea. Judging by the bug report at Google Code, this problem with Droid Bold has been hanging around since the early summer and shows no sign of being fixed yet.