Using your handwriting on your website
January 20, 2009
I use my own handwriting for titles to give my website a personal touch. I’m not using pictures though - that would be too much work and too inflexible. The only disadvantage: Some browser don’t show it.
First you’ll need your own handwriting as a font. You can have this for free at YourFonts. This also allows you to add some symbols to the character set that you often use. For me that’s arrows like À Ñ or just random stuff Ý Ô î. If you see letters like À Ñ Ý Ô î, then you’re browser doesn’t support custom fonts. So it makes sense not to use these symbols on you’re website - especially not in the title.
And then you’ll have to use some CSS Magic. Add this to the top of your CSS File:
@font-face {
font-family: 'JStyle';
src: url('jeromes_hand.ttf') format('truetype');
}
After that, you can use your font like any other font. For example:
h3 {
font-weight: normal;
font: 13px JStyle, Georgia, "Times New Roman", Times, serif;
}
By the way: the name of the font (in my example JStyle) can be anything. It’s just important, that you then use the given name in your stylesheet.
And that’s really all it takes - cool isn’t it?