Customize Font for Your Website Using CSS3

With the use of CSS3 we can now change our web fonts to something better than the default Times New Roman and Arial. This can be done with the use of @font-face attribute.

Before proceeding, make sure that the font that you are about to use is existing on your server. This is in case the said font is not available on the user's computer.

@font-face {
 font-family: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('webfont.woff') format('woff'), /* Modern Browsers */
 url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
 url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Now to use it, simply assign it to the font-family of your chosen item. Example:

body {
 font-family: 'MyWebFont';
}

This means that every character on the body will use the new font.

EOT, WOFF, SVG, OFT - What are these for?

These are list of font formats that are used by different browsers.

TTF	Raw TrueType Font format
EOT	Embedded OpenType; are font file that is only supported by Internet Explorer
WOFF	Web Only Font Format; Supported by IE9+, FF3.6+, Chrome 5+
SVG	Font format that is supported by old iOS from 4.2
OFT	Open Type PS Font; a font format developed by Adobe and Microsoft

I don't have the other formats -- what will I do?

There is an online converter that can produced all this format types. This will provide you all your formatted fonts that you will be needing.

Go to this site to convert font files - @Font-Face Converter