Whilst updating my uncle Henri Tournier’s site, I decided that it would be better, for the sake of automation, to use a CSS font, rather than an image, for the menus.
My brother Pierre, who was in charge of the website’s design, used the Samarkan font, to which he had made changes with Photoshop, removing horizontal bars which made it difficult to read in small sizes. Since this wasn’t possible to do directly in CSS, we needed to edit the font itself.
Editing the font
Once the archive is extracted into a folder, you just need to open ttfedit.jar. In the window, open (File -> Open) the TTF file that you wish to edit, then click on the glyf thumbnail on the left menu. A window will open with all of the characters.
In order to edit a character, you just need to double-click on its icon. An editing window appears with the shape of the letter as an outline. With the point deletion tool (a white cross on a red background), click on the corners that you want to delete then, when the letter is right, click on the cross in the top right to close the tool. In this particular case we’re lucky, the changes to be made are very simple. Do the same with all the letters (except f and t), then save your modified font (File -> Save As…).
Integrating the font on a webpage
By following Alsacréations’ tutorial (French), you can easily manage to create a webpage using a new font. However, so that the tool works under old versions of browsers like Internet Explorer, Firefox and Google Chrome, you need fonts in the EOT, WOFF and SVG formats. I’ve found a program that seems to work perfectly for the converting all these formats from TTF original – Font2Web.
Since the font doesn’t have accented characters, you’ll need to convert these with the method used for generating a URL (french) :
According to the server settings (I made it for french), it might be necessary to add, at the start of the script, the following function, as mentioned in the article :
With a bit of CSS, we get the following image:
The font was tested with the most recent browsers versions (Firefox, Internet Explorer 9, Chrome, Safari and Opera), without any particular issue. However, in Chrome (Version 24.0.1312.52m), with a size of 18px, the font seemed a bit too fat, which wasn’t the case with Chromium.
Warning : Samarkan font is not copyright free ; it’s distributed as Shareware. I tried to contact its authors to ask them if it was possible to allow for another payment method other than a postal check (Paypal or whatever), but none of the email addresses they mention in the readme file still exists. I’m still trying to find a way to contact them. By default, without their consent, updating this font is probably not allowed.