Making great typefaces takes a lot of time and effort. Not surprisingly, most good typefaces are not free. Sometimes they are event quite expensive.
Using @font-face in your website as previously explained requires you to have the font file on your web server. This means that you are essentially giving away the font file for anyone who wants to go look at it. For this reason, most typefaces are not licensed to be used as web fonts via @font-face.
Even if you purchased a typeface, you have not necessarily purchased the right to use it on your website. Font licenses vary, but they often only permit 'embedding'. This means you could use the typeface in a program like InDesign to create a poster, and then distribute that poster. You could not give away the typeface to other designers to edit your poster. Some type licenses explicitly forbid using the typeface with @font-face.
More and more font vendors are beginning to offer licenses that include the capability to use @font-face. Sometimes this includes purchasing a separate license based on the number of web views.
When using a typeface on the web, you must be aware of the specific licensing for that typeface.
Compared to our HTML and CSS, font files are very large. They are comparable in size to images. Additionally, every type style (italic, condensed, etc.) and weight (light, bold, black, etc.) is a different file to download. The more typefaces we use, and the more styles of them, the larger each page download is going to be on our website. This can have serious performance impacts.
It's important to use only the typefaces we really need. You should also consider which weights and styles of a typeface are actually necessary.
There are quite a few different ways to get legal typefaces to use on our websites. Some are free, and some are not.
There are essentially two methods:
Both approaches are fine for our purposes.
The League of Moveable Type is a great resource for some interesting free typefaces. All of the typefaces on this site are free to use on your website.
Font Squirrel is one of the best free type resources. You can search the site for all sorts of typefaces. Many are available for @font-face. Best of all, Font Squirrel will give you all of the CSS code and font files you need. You can even upload your own font files (legally licensed of course) to generate the CSS and various font formats.
There are several types of font licenses used for the fonts on Font Squirrel. See the FAQ page to review and undestand the licenses.
Lot's of people enjoy making typefaces for fun. Sometimes they release them for free. Doing a Google search "free web fonts" will give you all kinds of results. Be careful though, a lot of times these typefaces are made by amateurs and are of very poor quality
Font embedding services host the typefaces on their sites and allow you to link to them. The advantage of this approach is that the licensing issues are taken care of and their web hosts are usually faster than yours. Using an embedding service is also often easies because you'll have a visual way to choose fonts and the service will provide you with the code to copy and paste. Embedding services can be free or paid services.
Adobe Fonts is a premier font embedding solution on the web with access to the entire Adobe Font collection (wow!). Adobe Fonts are included with the paid subscription of Adobe Creative Cloud. Go to Typekit Web Fonts to get started.
Cloud Typography is another paid service by the type company Hoefler & Co. This service is newer than TypeKit but similar in approach. Plans start at $99 per year.