Processus //

Yesterday I posted a very old text I wrote, that I slightly remelted with my “today”‘s eyes. This text is a kind of letter I wrote (and I actually mailed it…) to my former high school with some funny/trash content in it (well funny/trash is my stand point at least). The letter is joined with a narrator’s comment explaining what’s supposedly happening in real life, which comes to be quite different from what’s written in the letter (if you red it, put yourself at rest, none of the letter or the comment were actually close to reality).

Anyway, in order to transcribe it for the web, I wanted to keep the original appearance of the text, using a regular font for the narrator’s comments, and a “hand script” font for the letter. So I decided to look at what’s available nowadays to apply a custom font to an ordinary HTML page in a portable, cross-browser way, without cheating or being annoyed with bitmap pictures like grids of PNG or whatever dirt.

And here is what I did.

Applying custom styles in WordPress

First, I needed to be able to apply custom CSS styles within my wordpress blog. I didn’t want this to be hard-coded in the WordPress theme I’m using (using Appearance > Editor for instance). I kinda wanted a cleaner way to do it, so I searched and I stumbled upon the “Enhancing CSS” WordPress plugin, which uses the internal rewrite WordPress engine in order to embed a custom style sheet you define in the admin WordPress interface.

If you want to do so, install the plugin at http://wordpress.org/extend/plugins/enhancing-css and go in the “Appearance Menu” > “Enhancing CSS” menu item, so you are able to edit your custom style sheet in a pretty cool editor. Here is the snippet of code I used for my “narrator” font (I called it the ‘story’ CSS style):

  p.story:first-letter {
    font-weight: bold;
  }
  p.story {
    font-family: 'trebuchet ms', arial, helvetica, sans-serif;
    padding-left: 20ex;
    text-align: right;
    font-size: 9pt !important;
    font-weight: normal;
    color: #F93;
    line-height: 150%;
}

To use this style within your posts, just declare a <p/> paragraph with a “story class” like this:

<p class="story">And here is my story</p>

Specifying a custom font in CSS

To specify a custom font, you need a few things. To begin with, you need the font! (we’ll see below where to find good fonts), available as different formats (TTF and OTF are probably the most widely known). Also, you need to know how to specify it within a CSS style, and finally you need to be sure it will be supported by different kind of browsers (namely, the ineffable Internet Explorer).

Finding and preparing the font

Downloading fonts

To find a bunch of good fonts for free, google around for “free fonts”, and download the one you love. I personally like to browse DaFont.com to find good fonts. Take care to the license though. Most fonts are free for non-commercial use as far as I can see, but you might want to (must in some cases) support the author with good money.

Prepare the font

As you will see below, you need to convert your font to different formats so it’s supported by all browsers. Particularly, Internet Explorer only supports the EOT proprietary format, so you need to find a converter.

I used the following online converter to prepare my font: http://www.fontsquirrel.com/fontface/generator

Click on the “Add font” button, and follow the instructions until you get a .zip file full of different formats (ttf, eot, svg, woff, and even sample CSS and HTML snippets).

Publish the font

Once you’ve got the font you like, you must make it available on the web, so you need to publish it at some place, let’s say at the /fonts path of your web site.

So get your FTP client and upload your font files (ttf, eot, svg and woff) on the web.

Use the font!

The @font-face CSS element

Now that the font is available on the web, you can embed it in your style sheet (just like we did at the beginning of this article) using the ‘@font-face’ CSS element, like follows:

@font-face {
  font-family: 'TenMillionFirefliesRegular';
  src: url('/fonts/ten_million_fireflies-webfont.eot');
  src: local('☺'), url('/fonts/ten_million_fireflies-webfont.woff') format('woff'), url('/fonts/ten_million_fireflies-webfont.ttf') format('truetype'), url('/fonts/vten_million_fireflies-webfont.svg#webfontwV3dmlwM') format('svg');
  font-weight: normal;
  font-style: normal;
}

This is really just like the CSS snippet you get from the fontsquirrel.com fontface generator. The explanation for this fuzzy syntax is Internet Explorer, of course, which will look at the first ‘src’ attribute and load the font as EOT format. Afterward, it will stumble upon the second ‘src’ attribute, beginning with local(‘☺’), which will make IE happy. Don’t forget it, or it won’t be happy.

Then, the other (clever) browsers will browse the intelligent ‘src’ syntax, within which you can specify any kind of font format, using a url(path) format(expected_format) syntax.

Well, just copy-paste it from fontsquirrel.com ‘s generated CSS snippet, it will do the trick :)

Use your font in a CSS style

Finally, use the font!

The CSS stylesheet using the font:

p.penmanship:first-letter {
  padding-left: 7ex;
}
p.penmanship {
  font-family: 'TenMillionFirefliesRegular', 'Chiller', 'Mistral', 'Script', script;
  text-align: justify;
}

Then, in the wordpress editor, use the HTML syntax, just like we did at the top of this article:

<p class="penmanship">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet, mauris at dapibus volutpat, lorem massa auctor eros, at faucibus nisi urna quis nisi. Ut id nunc sapien, sed feugiat erat. Integer et purus purus. Ut lacus justo, pharetra eget facilisis molestie, porta in lacus.</p>

Final advice

To be sure your article will be Ok under every browsers, one thing you can do is installing all these browsers and test by yourself, or you can go to the web site below and ask for some “screenshots” of your web page under different Browsers and Operating Systems.

http://www.browsershots.org

Just enter the URL of your web page, choose the browsers you want to test on, and wait for some time the screen shots to become available. Your request will be queued so you don’t get the screen shots immediately. Also, you’ll probably need to click on the “Expand” button if your request will last for more than half an hour.

Anyway, some browsers variants are currently failing because they are probably not quite maintained, but still, you’ll get some idea of the “cross-browser” support of your site.