There are couple ways on how to embedding web fonts to your site. One of the popular way is by using font hosting service. One of the example is using Google Fonts, they offer more than 500 fonts available to choose. You can check quickly on quick tutorial in css section on how to use google web fonts.
Right now, we will be more focusing on hosting the fonts file on your own hosting server. There are couple fonts extension types available. They are listed as below:
| Fonts Format | Browsers |
| Web Open Font Format (.woff) | Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, Opera 11+ |
| TrueType (.tff) and IpenType (.otf) | Chrome 4+, Firefox 3.5+, IE 9+, Opera 10+ |
| Scalable Vector Graphics (.svg) | Chrome 17+, iOS 3.2+, Android 3+, Safari 5+, Opera 11+ |
| Embedded Open Type (.eot) | IE 4+ |
WOFF, TTF and OTF are the most popular web fonts choice format to use.
How to use @font-face basic syntax
This is the basic syntax on how to use it.
@font-face{
font-family: 'My font name';
src: url('fonts/fontName.woff') format('woff'),
src: url('fonts/fontName.ttf') format('truetype'),
src: url('fonts/fontName.svg') format('svg'),
src: url('fonts/fontName.eot')
}
/** this is how you use it ***/
body{
font-family: 'My font name';
}