web fonts

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.

TTFRaw TrueType Font format
EOTEmbedded OpenType; are font file that is only supported by Internet Explorer
WOFFWeb Only Font Format; Supported by IE9+, FF3.6+, Chrome 5+
SVGFont format that is supported by old iOS from 4.2
OFTOpen 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

1 comment :

  1. yaniconquistadora2/4/12, 1:57 PM

    Thanks for sharing this very informative blog and article. . will try this face font one of these days :)