Embedding fonts on your website
There are only a handful of fonts you can use as standard on the web. Whatever fonts your users have on their computers are the fonts that they can see, so we use an embedded font system to allow users to see text in fonts they do not have. There are many useful reasons for embedding fonts on your site. Particularly when branding is concerned. We use a rather old, but still very good piece of software for this. It is the Microsoft WEFT (web Embedding Fonts Tool) which was originally released in 2001 and I think the latest update was 2003.
How it works:
You specify the website you want to put the font on and choose the font from your own font list. The program will then generate an eot file that you upload to your website. You can refer to this eot file in your css. In the example below I am using the martina font from my primary headings.
<!-- /* $WEFT -- Created by: Neil MacLeod (neil@web-studio.co.uk) on 18/03/2008 -- */
@font-face {
font-family: Martina;
font-style: normal;
font-weight: normal;
src: url(MARTINA0.eot);
}
-->
You can then use this as a normal font-family icon in your css, e.g. Heading 1
h1 {
font-family: Martina, "Trebuchet MS", Arial, serif ;
font-size:2.8em;
font-weight:normal
}
and a main heading looks like this
A great benefit is that the search engines can read the text so you do not need to add in images for headings.
The program is available from http://www.microsoft.com/typography/web/embedding/weft3/download.aspx
How it works:
You specify the website you want to put the font on and choose the font from your own font list. The program will then generate an eot file that you upload to your website. You can refer to this eot file in your css. In the example below I am using the martina font from my primary headings.
<!-- /* $WEFT -- Created by: Neil MacLeod (neil@web-studio.co.uk) on 18/03/2008 -- */
@font-face {
font-family: Martina;
font-style: normal;
font-weight: normal;
src: url(MARTINA0.eot);
}
-->
You can then use this as a normal font-family icon in your css, e.g. Heading 1
h1 {
font-family: Martina, "Trebuchet MS", Arial, serif ;
font-size:2.8em;
font-weight:normal
}
and a main heading looks like this
Martina Font
A great benefit is that the search engines can read the text so you do not need to add in images for headings.
The program is available from http://www.microsoft.com/typography/web/embedding/weft3/download.aspx
Labels: fonts, web design




