@font-face, not specifically unique to CSS3, gives the designer/developer the freedom to use which ever font they choose, as long as it is legally allowed for use, so make sure it has a web-font license. This tutorial will help you understand how to do this effectively.

Ok so where do we start, well you can either create your own font, using Illustrator or something similar or you can search for a font on the web. I suggest a site like fontsquirrel.com simply because they have everything you need to get started. They have a huge database of fonts and will convert them into all the different file types you need.

Lets talk about the different file types you will need for this to work on multiple browsers, below you will find a list of the various files and the browsers they work with.

• • Internet Explorer : EOT
• • Safari : TTF / OTF
• • iPhone : SVG
• • Chrome : SVG
• • Firefox : TTF/OTF
• • Firefox 3.6+ : WOFF
• • Opera : TTF/OTF

The code below shows you how to implement font-face into your CSS file but we will need to look into this code a little deeper. We will need to give our new font a name and this can be seen on line 2, you can name this anything you want and is exactly the same as you would call a web-safe font. On lines 3 - 6 you will see were we reference the source files for the fonts, these are separated by using commas. This is just very basic code to get it to work, you can also use additional features such as font-weight, font-style and any others if you choose to.

@font-face {
font-family: 'JosefinSlabSemiBold';
src: url('font/JosefinSlab-SemiBold-webfont.eot?') format('eot'),
url('font/JosefinSlab-SemiBold-webfont.woff') format('woff'),
url('font/JosefinSlab-SemiBold-webfont.ttf') format('truetype'),
url('font/JosefinSlab-SemiBold-webfont.svg#webfontyVaaX3CG') format('svg');
}

To create different font weights you will have to create/download multiple versions of the font and reference them in the same way, below is a simple demonstration on how to this. I have stripped out the majority of the file types because you have seen them in the above example. As you can see one of the fonts is in bold whilst the other is semibold.

@font-face {
font-family: 'JosefinSlabSemiBold';
src: url('font/JosefinSlab-SemiBold-webfont.eot?') format('eot');
}
@font-face {
font-family: 'JosefinSlabBold';
src: url('font/JosefinSlab-Bold-webfont.eot?') format('eot');
}

The following code shows you how to reference your new font in individual sections such as h1, p and anything else you choose to use it with.
Below references the h1 tag in bold and the h2 tag in semibold.

h1 {
	font-family: 'JosefinSlabBold', Arial, sans-serif;
	font-size:17px;
}
h2 {
	font-family: 'JosefinSlabSemiBold', Arial, sans-serif;
	font-size:17px;
}

As you can see it is exactly the same as you would normally call a font-family, I would also add similar web-safe fonts after the customised font just in case it fails and then it covers your back if anything does go wrong.

I hope this tutorial has been helpful, if I have missed anything that you may want to know just get in touch and I will add it.

• • Easy to use social buttons on every important page or post

Due to a recent mix up with my database I have lost some of my tutorials, do not fear though I will rewrite them and they will appear shortly

This is the fourth site I have created for my portfolio and the first experimental site using the latest languages. The languages I am talking about are HTML5 and CSS3, I decided to try making a site using these languages after reading the introductory books from "A Book Apart". The books are an impressive read and I was intrigued to see if I could make a site of my own using these languages. I have also used JavaScript and PHP to help me out with the more advanced parts of the site.

This time I have implemented the use of WordPress simply because I have decided to share my new found knowledge with you in helpful and simple to understand tutorials. There will be numerous tutorial categories including the scripting languages I have mentioned above and also numerous software packages I have used. As I write these tutorials you will be able to see them appear below this post and over time this post will disappear so you won't have to scroll to see what's new.

If you have any feedback or queries don't hesitate to get in touch using either the comments form on the various posts or using the contact form, all queries will be read and I will try and answer everything you may ask to the best of my abilities.

Thank you for your time and I hope you enjoy viewing the site as much as I did designing it.