Fun with fonts and CSS

I wanted to use Blackout for the style in the Tower of Shadows game I am running. I played around in Inkscape for a bit, putting different filters on it, but then decided that I would rather not rely on images to employ it.

I thought I recalled something in the Twenty Eleven theme where the article element was getting classes applied based on tags, among others. So I looked at the source and found this neat code in the page:

<article id="post-2132" class="post-2132 post type-post status-publish format-standard hentry category-gaming tag-old-school-hack tag-orthos tag-rpg tag-tower-of-shadows">
<header class="entry-header">
<h1 class="entry-title">Tower of Shadows</h1>

One can do all kinds of fun things based on those classes. For instance, it has the format, so you can adjust how a standard post looks, as opposed to a gallery, or video. The part I was looking for was tag-tower-of-shawdows.

The next step was to find a plugin that would add stylesheets to the site without having to edit my theme. First of all, I don’t want to create a child theme, since I normally change up to the next default theme each year (waiting for Twenty Twelve!). Secondly, I want my CSS to stick, even if I change themes (though it may have to be adjusted, if the theme template doesn’t give me the same classes to work with.

Anyhow, I went with Improved Simpler CSS. It works on multi-blog instances of WordPress, but works fine on a single-blog instance just as well. With it, I added the following CSS to my site:

@font-face {
font-family: BlackoutMidnight;
src: url(‘/files/blackout-midnight.ttf’);

.tag-tower-of-shadows .entry-title {
font-family: BlackoutMidnight,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 40px;

Now, any post that is tagged as “Tower of Shadows” (check it out), the title will attempt to use BlackoutMidnight as the rendered typeface.

I plan on doing a lot more with this, by adding my own classes, and applying them to interesting parts of the game, as well as character stats, for easy identification when scanning combat logs. Oh, the creativity that comes from gaming!

One thing that would be useful is if I could attach specific stylesheets conditionally, such as to any post that has a given tag. There were plugins that claimed to do that, but I wanted someone really simple, and I don’t think the additional overhead is that big of a deal, for right now.

So, anyone know of any typefaces that would be really cool for “sound effects”? Stuff like, “Boom!”, “Magic Effect!”, and “ZOMG FACE HIT!”. They would need to be released under the Open Font License or something similar. ^_^