The @font-face allows the web users to download a specific font from the internet and can install them on your computer. There is no necessity that the web designers need to stick to a particular set of fonts that are already available, they could just choose and download any type of fonts from the webpage.
Of course, there are a handful of fonts available on the web but however, the CSS rule of @font-face offers the simplest, strongest, and the most flexible designs of the fonts. Also you need to check which fonts can be legally used and that could be freely accessed.
The @font-face was created years ago but it was supported by the browsers only recently. You can embed beautiful fonts from here and has the following extensions like *.eot (Embedded Open Type Microsoft), *.svg Scalable Vector Graphics (XML web graphics iPhone), *.woff Web Open Font Format (Mozilla), and *.ttf standard TrueType font. You can start using these fonts as a web designer, your life totally changes and becomes easier and it also gives a better impact towards your career. For better communication and designing, the complete knowledge about the fonts is truly essential for the web designers.
Here is a collection of 20+ awesome Fonts Collection with @font-face kits which is useful to you next rojects..