Here at WDF, we often pleased to provide you free fonts. But the problem is – they are static and can’t be used in programming. Therefore today I would like to show you the way of the technical side on implementing custom web fonts. So what are the options for implementing customized web fonts within design? Here is the review of three major methods of incorporating @font-face and explain the pros and cons of each method individually. 
1) CSS3 @font-face
Standard @font-face
This is easiest and hence most popular way of implementing custom web fonts — @font-face. The CSS syntax for declaring a custom @font-face is very simple. Basically you just need to specify the font name and font file source. Once the font is specified, you can apply it to any design element.
@font-face {
font-family: "Custom Font Name";
src: url('font.ttf');
}
body {
font-family: "Custom Font Name";
}
Bulletproof @font-face Syntax
Every browser supports diverse font formats (IE supports EOT only, Firefox supports EOT & TTF, and Safari supports OTF, TTF, and SVG), additional font formats are required to be cross-browse. Below is the common way of implementing @font-face from Font Spring.
@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 */
}
@font-Face Generator
Here is the @font-face Kit Generator to export fonts in different formats. This tool lets you generate several font formats from an existing font.
Premium @font-Faces
Most of the fonts are not allowed to embed or distribute on the web, Font Spring allows professional fonts with @font-face support.
Pros & Cons
• Pros: Because the fonts are saved on your server, you will have full control over them.
• Cons: The process of implementing @font-face is bit complicated.
2) Font Service Providers
Another way of using fonts without disquieting about licensing issues is by using the fonts from service providers such as Typekit and Fontdeck. With font service providers, the fonts are hosted on their servers and you have to pay a subscription/licensing fee to use these fonts. To install Typekit, it requires two lines of Javascript.
<script type="text/javascript" src="http://use.typekit.com/are7wnq.js">
</script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
Pros & Cons
• Pros: Easier to implement because you do not need to generate the different font formats.
• Cons: Subscription required.
3) Google Web Fonts
Google Web Fonts is also considered as hosted web font providers, but Google Web Fonts are free to use. Google Web Fonts loads very fast and they are easy to use. To implement Google Web Fonts, just add code below.
<link href='http://fonts.googleapis.com/css?family=Arvo'
rel='stylesheet' type='text/css'>
Pros & Cons
• Pros: Google Web Fonts are free, and loads fast.
• Cons: Not enough selection is available.
Conclusion
@font-face is good and creative process if you need to use your own custom fonts. Typekit & Fontdeck offer professional fonts in complete sets (styles & weights), but require subscriptions. But personally, I like Google Web Fonts because it is simple to implement and it loads very fast within web pages.