Hate Arial and all what is common in the web? Want your blog to be different and original? Keep on reading, this article will help solving one of your problems.

Web design has its limitation, which is for e.g. using common fonts like Arial, Tahoma, Verdana families etc. However, creatively thinking designers always find a way to diversity webdesign. Typography is our most important asset and while in print design we can manipulate and use any fonts we like, in webdesign we have to resort to modify only options we have.

Before I show how to apply simple method of embedding custom fonts, you should be familiar with basic definitions.

The Difference Between Font and Typeface

A font is a complete set of characters in a particular size and style of type. A typeface contains a series of font. For instance,Times Bold, Times Italic, and Times Roman are actually 3 fonts (Most people wrongly assume that one entire font family is called a “font.”)

Typefaces In Web Site Design

Applying different fonts and typefaces in web site design is not as simple as it is in print design. Normally you have to choose between Arial, Tahoma,Verdana etc. However, there are few methods which allow you embedding your custom font in your website.

Embedding Custom Font With @Font Face

@Font-Face is one of the new CSS3 feature implemented in every major browsers except IE. (Embedded fonts simply won’t be shown, instead, user will see common Windows font).

Insert that kind of part in your .css file. It’s easy peasy, really

@font-face {
font-family: “GraublauWeb normal”;
src: url(”http://yourdesignsite/fonts/GraublauWeb.otf”)
font-weight:normal
}
.yourcss{
font-family: GraublauWeb normal,arial;
}

Voi’la.
Ps. Install only Opentype fonts and never ever think of installing fonts you normally need to pay for.
Ps2. It’s illigal.
Now, try it at home and show me your results. Share them in the comments. Thank you

1. // So easy
2. @font-face {
3. font-family: “Helvetica neue normal”;
4. src: url(”http://site/fonts/helvetica.ttf”)
5. font-weight:normal
6. }
7. .textStuff{
8. font-family:Helvetica neue normal,arial;
9. }

Good luck!