Handy - a simple easy-to-read handwritten font

There’s a demo page where you can see it in action (works across most browsers) and you can download the font in TrueType format or EOT (for Internet Explorer).

I’ve also written a tutorial on how I create web fonts using open source tools.

Share this:

Example page.

Download TrueType font (TTF) here or EOT format for Internet Explorer compatibility if using it on a website.

I’ve also written a tutorial on how I create web fonts using open source tools.

Share this:

The trick is to make 2 DIVs with the same text content in the same place (using CSS position) and make the top one a different color and only half height (setting the height to slightly over half a line using height: 0.6em and overflow: hidden)

Demo here.

Share this:

GlyphTracer is an easy-to-use program for creating a font from a bitmap image.

First I create an image of the characters in the font using the Gimp. I’ll use a separate layer for guide lines. I could also use a scanned image (if you don’t have a grahics tablet then I’d suggest you draw the characters on paper and scan them).

Run Gimp and go to File -> New and create a new image. Make it quite wide.

In the Layers window right click on the background layer and create a new transparent layer. The new layer is selected by default.

Now I’ll draw some guide lines. Click on the pencil tool.

Then select a single pixel brush, the finest available.

I click on the page and then hold down shift and control to make it easier to draw perfectly horizontal lines. I draw 4 lines.

Right click on the bottom layer (not the one with the guide lines) in the Layers window.

Select the paintbrush tool and a suitable brush size.

Use “+” and “-” to zoom in and out until you are at an nice size to work at. Start drawing characters!

When you’ve finished one line then click on the guide layer. Press control-A to select everything in the layer, control-C to copy and press control-V to paste. You now have a new set of guidelines. Click on the move tool.

Click the title bar of the image window and press shift and the down arrow until you have a new set of lines.

Right click on the new layer called “Floating selection” and select “anchor layer” to add it to the guide layer.

DON’T FORGET to left click on the background layer to select it before you start drawing characters again!

I’ll include some symbols “!” and quotation marks and to make glyphtracer realise that it’s a whole line I’ll draw a vertical at the side (otherwise I’ll get 2 glyphs for the “!”) and underline the quotes (otherwise I’ll get 4 single quotes instead of 2 double quotes).

GlyphTracer will only work on 1-bit (black and white with no greyscale) images so go to Image -> Mode -> Indexed and select “use black and white (1 bit palette)”.

Uncheck the “eye” visibility checkbox for the guide layer.

Now save the image as a PNG file.

Run glyphtracer and select the name for your font, the image file you just created and an output filename (it will create an SFD file which I will then use FontForge to edit and convert to a standard TTF).

GlyphTracer will pick characters and highlight them as blocks which you can click on. The first group it asks you to pick is lower case characters, starting with “a”. Click on the boxed “a” and it’ll automatically move on to selecting the next character. If you have characters in other groups such as capitals and numbers then select the group from the drop-down list (bottom left).

Here I am picking “D”.

See how the vertical and horizontals have made glytphracer realise the size of characters.

When you’re done then hit the “Generate SFD file” button.

Run FontForge and open the SFD file. You’ll get a window showing the characters in your font.

Double click one and you get a window to edit it (you’ll have to get used to splines though since that’s how the characters are defined).

Select File -> Generate Fonts (or control-shit-G) and create a TTF (TrueType font) file. This can be used to display your font in a website (only works in Firefox, Opera, Safari and Chrome – IE uses EOT files and I’ll show you how to convert in a moment).

I use ttf2eot to convert from TTF to EOT for Internet Explorer compatibility.

At the linux command line you can use:

If you’re using IE to view the test page then you’ll have to recreate the EOT file each time you export the TTF file from FontForge.

I create a webpage in the same directory as the TTF file and put this text in:

And hey presto! The page appears using my new font and it’ll work on any browser.

But we’ve still got the underline on the quotes and the capitals and lowercase don’t line up.

First, the quotes. In FontForge use control-alt-[ to go through the glyphs until you find the quotes. Double click to open the edit window.

Double click on the unwanted underline so all the points in it are selected.

Press delete. Do this for both quotes. Generate a TTF font again and refresh your browser.

Now to vertically align the lowercase characters. Double click the “a” and the “A” in FontForge and press control-alt-minus so that you can see the font guide lines.

The “a” is too high. It should rest on the line.

Hold down shift and click all the characters from “a” to “z”.

Right click the one of the selected letters and select Transform.

Select Move and I set the Y value to -340 (I had to play around to find the right value) and OK.

Look at the “a” in the window. It’s moved to about the same level as “A”.

Generate the TTF again and refresh your browser window.

And here’s the end result. You can select and copy the text in the browser, it’s more SEO friendly and far easier to maintain than using images or Flash to get the font you want. Hoorah!

Update:

It also works astonishingly well across different browsers – I’ve tested with Mozilla, Chrome, Safari, Opera and IE5, IE6, IE7, IE8 and IE9. The only bug I’ve seen is with Chrome on Windows which gives a square character for space. This is what some browsers do when trying to display a character which doesn’t exist in the page. Defining character 32 (space in ASCII) would probably fix it.

Share this:

List files in a directory
The handiest form is:

which gives something like this:

The information here is: files permissions, number of links to this entry (ie files in a sub-directory), the file’s owner, the file’s group, the file size in bytes, date modified and filename.

cd

Change directory
To go up a directory:

To go to your home directory:

To go down into the test directory:

To go to the /var/logs directory:

And if you’re lost then the pwd command will tell you where you are

pwd

Show the present working directory

whoami

Tells you which user you are logged in as (I mainly included this because it makes me giggle). Can be useful – if your program is running on a web server and it can’t access a file then this might make things clearer.

ifconfig

Displays information about your network interfaces.
Useful for: finding your IP address, MAC address

grep

Search for a phrase
Search all .php files for the string “add_filter”:

Same but recurse all sub-directories:

Same but case insensitive (ie pick up “Add_Filter” or “ADD_FILTER” as well):

mv

Move a file

cp

Copy a file

rm

Delete a file

cat

Output a file contents as a stream. Useful when piped with “|” into another command, eg search the file myfile.txt for the string “frogs” (case insensitive):

tail

Displays the end of a file (ususally used for following log files). As new lines are added they are displayed.

See find and backticks below for useful tricks.
Press Control-C (^C) to leave.

find

Find a file
As seen in my article on following your apache webserver logs you can find all files called “access-log” in the /var directory:

unfortunately this gives errors for directories which couldn’t be opened (user has no permissions) so this is better:

Linux commands give output streams called standard output (given number 1) and errors (given number 2). Here we send the error stream off to the device /dev/null (which basically throws everything away). We could do this:

And now the file “out.txt” contains the output, in this case the filename and “error.txt” contains the error output.

Hints and tips: Backticks

You can send the results of one command to another using backticks (`), as in this example from my article on following your apache webserver logs:

This does the find command first to get the location of the file “access.log” and then uses that filename for the tail command.
We could even pipe this result through grep to search for a phrase:

This will give a realtime display of all requests to “login.php” on your web server. Neat huh?

wget

Retreive a URL (eg web page)
Download a file to the current directory:

Share this:

jw-share-this.zip

This plugin uses the techniques I’ve outlined in these articles:

• How to make a ’share this post on Twitter’ link in WordPress
• How to make a ’share this post on facebook’ link in WordPress
• How to make a ‘Digg this post’ link in WordPress
• How to make an ‘email this post’ link in WordPress

If you find the icons included (which are 48×48 pixels) are too large then here are some 32×32 pixels smaller designs.

Share this:

In your mysql interface you can set where the log file will be written to and then turn on the logging option (change log filename as applicable):
set global general_log_file = ‘/var/log/mysql.log’;
set global general_log = ‘ON’;

(to see the value of these variables type:
show global variables where variable_name like ‘general_log%’;
in your mysql interface)

Now use:
tail -f /var/log/mysql.log

and you’ll see every new SQL statement which the database receives.

And of course to turn it all off again type this in the :
set global general_log = ‘OFF’;

Share this:

As apache requests are received you’ll see information about them appear on screen.

Can’t find the log file?
Try this:

This searches for the file “access.log” in the /var directory and sub-directories. The “2>..” on the end is a really neat trick which directs all error messages to /dev/null so you don’t get messages about permission denied on directory traversal.

If this doesn’t find the file then it’s probably not in /var so try:

Which will search from /

Combine the find command with the tail command

Note the wierd backtick character around the find.

Filtering the results
If you’re looking for something in particular then pipe the results through grep to filter on a string:

Share this:

I’ve been working on a natural language web page designer. This is a very rough beta version for testing so have a play and send me feedback (what works/doesn’t work, things which aren’t clear in the helpfile).

Some knowledge of HTML and CSS is useful but not essential. Look at the example code and I’m sure you’ll get the idea.

Share this: