Seattle Web Design 
Custom Font Face
Do you like to use your own font on your website and do not know how to do that? Here in this post I will show you how you can do that in very simple words. To do so you need to purchase your font face files and save them in a folder. Your font face includes four important files with .eot, .woff, .ttf, and .svg extensions. These files guarantee your font works on different internet browsers. For example I use “Apple” font family so its main font face files would be apple.eot, apple.woff, apple.ttf, and apple.svg.
Upload “fonts” Folder
You need to create a folder and call it for example “fonts”. Copy all above four files in it. Upload “fonts” with its files to your website’s root.
Edit CSS File
To apply your font on your website you need to fist introduce your fonts and then use it in the body css part. Base on your font name edit bellow lines and copy them somewhere over body styling section. Since I have used “Apple” font family, I used it to create my @font-face styling part.
@font-face {
font-family: 'Apple';
src: url('fonts/apple.eot'); /* IE9 Compat Modes */
src: url('fonts/apple.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/apple.woff') format('woff'), /* Modern Browsers */
url('fonts/apple.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/apple.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Define Your Font in body
Now it is time to use your font on your website. All you should do is defining font-family.
body {
font-family: 'Apple', Arial, Times New Roman, sans-serif;
}
Save your css file and upload it to your web server. Refresh your website. BOOM! You are done buddy!
Extract font face files from .ttf font file
If you own file and need to extract four required files, you can use Font2Web online tool to do it. All you should do is click on the link bellow and upload your .ttf file. It would give you your reqier package.