Haven’t had much of a chance to be updating my site recently, too busy being a dad! Funnily enough I haven’t really been taking any pictures other than of Izzy. Here are a few pics of baby izzy, you can see why I’d rather spend time with her than a computer screen (though I did just splash out on an iPad 2, great fun).

Paris 26 Gigapixels.

Belfast Shipyard

Just read on the BBC that visitors to the Thompson Dry Dock (the dock the Titanic was built) at the old Belfast Shipyard are to pay for the privilege.

The Northern Ireland Science Park have obviously seen pound signs in their eyes, what with visitor numbers on the up and tourist season approaching.

I Took a walk around the Shipyard a few weeks ago and to be perfectly honest there isn’t much to see to make it worth spending any sort of entrance fee. I’d understand their motives a bit better if there were visible signs of investment in the area (other than fancy, empty apartments and office blocks). I’ve got a feeling naming an area after a sunking ship wasn’t such a good idea, bad omens and all that…

If urban decay happens to be your thing though, it’s well worth the visit, plenty of rust!

Harland and Wolff Crane

Rusty Sign

Working By Hand Power

Download iFlowerpaper

To get around this limitation designers used to create graphics for headlines, or use flash based scripts such as sifr. CSS3 allows for easy embedding of fonts on a page, surprisingly it’s supported well across all browsers.

Browser Support for @font-face

All modern browsers support the @font-face rule in some shape or form. Internet Explorer has supported it since IE4, with the only issue being that they only support embedding of their own proprietry font file – EOT. Safari, Firefox and Opera should all support True Type or Open Type fonts. Safari on the iPod/iPhone will only support SVG files. With this in mind it’s always good to pick a web safe back up font to ensure your site degrades nicely.

Fonts and Licensing

Fonts aren’t just free for everyone to use. Make sure that the font you plan on using on your site is bought and the license permits you to use it online. There are plenty of free fonts out there, use one of those if you aren’t sure. If a client insists on using Helvetica or other commercial font, make sure they buy it first!

Converting Your Font

If you have a TTF or OTF font you can convert it online to EOT and SVG using a service like Font Squirrel (who also provide some great free to use fonts, prepackaged for using on the web.) The typeface I’m using on this site is Charis which I downloaded from there.

Once you have your font files ftp them up onto your web site.

The CSS

Declare the fonts you wish to use at the top of your css file

@font-face {
	font-family: 'CharisSILRegular';
	src: url('Fonts/CharisSILR.eot');
	src: local('Charis SIL Regular'), local('CharisSIL'), url('Fonts/CharisSILR.ttf') format('truetype');
}

font-family: This can be anything you want, it’s how you will call the font later on in your CSS file.
src: This tells the browser where your font is located.url is a location on your server, local would be the name of the file if a user happens to have it already and format is the file type. It’s always good to give the local name as it would mean that if the user has the font they don’t need to download it from your server. If the browser doesn’t find the font locally it will move to the next source. Declare your EOT file seperately from the others.

So now you have declared the font you can use it throughout your CSS in the same way you use other fonts

h1 { font: 2em CharisSILRegular, Georgia, serif;}

Don’t forget to add a fall back font (in this case Georgia, then any other serif font) to ensure maximum degradability. That’s all there is to it. Just like in print design try not add too many fonts to one design (even more importantly for the web as the browser needs to download every font the user doesn’t have locally)