Sometimes we want to embed custom fonts in our websites to make it attractive. If we use custom fonts in our websites without embedding them then the client will view the website in default font which may disturb the look of our website.

Some of the most common web safe fonts are verdana, serif, arial, georgia, trubuchet ms etc. These days embedding custom font we can publish websites in custom fonts to improve the design of our websites. Thanks to Google web fonts library which we can call directly and embed to display fonts present in Google web http://www.google.com/webfonts. Moreover we can also use CSS3 @font-face and upload fonts directly in our server to display the websites in custom fonts.

Integrating Google web fonts is easy:

link the font family you want to use

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

Now after that add the font family in your css for e.g.

font-family: ‘Fjalla One’, sans-serif;

To use @font-face

Download the font-face kit where you will find different versions of fonts which has to be uploaded in the server and it also contains a css file where you will find the way to integrate the font in the css.

for e.g.

@font-face {    font-family: 'CalligraffitiRegular';    src: url('Calligraffiti-webfont.eot');    src: url('Calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),         url('Calligraffiti-webfont.woff') format('woff'),         url('Calligraffiti-webfont.ttf') format('truetype'),         url('Calligraffiti-webfont.svg#CalligraffitiRegular') format('svg');    font-weight: normal;    font-style: normal;
}


Now we can directly use font-family CalligraffitiRegular in our css after uploading font in the directory and putting the above css code.

readymade font-face kits can be directly downloaded from http://www.fontsquirrel.com/fontface

You can also upload custom fonts and generate font-face kit via the url http://www.fontsquirrel.com/fontface/generator.

Please let us know if there are any queries related to font-face or Google web fonts.

There is another alternative method using jquery font replacement technique using cufon.