Where You Can Find Fonts to Use in Your Website

@font-face resources you can use as you design your website's typography

spelling counts
Image courtesy Dimitri Otis / Digital Vision / Getty Images

Effective and attractive typography is an important part of designing an effective an attractive website. While there are a number of choices that you will need to make as you work with the typography of a design, one of the first will be where can you find the actual fonts to use?

Web-Safe Fonts

For years, website designers were limited in the font choices that they could reliably use on websites. “Web-safe fonts” were the designation given to fonts that were all but guaranteed to be on a person’s computer.

Since websites use fonts directly from that person’s computer, choosing one of these safe fonts (Times New Roman, Georgia, Palatino Linotype, Arial, Verdana, Trebuchet MS, Courier New, and few others) essentially ensured that the type choices you made would be accurately reflected in the browser when a visitor came to the site.

The advantage of web-safe fonts is that, since they are being drawn from the site visitor’s own computer, there is no additional time or bandwidth required to download those font files. This makes for a faster loading webpage.

The downside to web-safe fonts is the limited choices that they provide to designers. On websites today's you will see a mix of web safe fonts that are drawn from the visitors computer, as well as web fonts that can be applied to sites in a variety of ways.

Free @font-face Downloads

The rise of @font-face (pronounced “at font face”) gave website designers a wealth of new choices to work with for their website typography.

Instead of drawing from a person’s computer, @font-face allows font files to be linked to for a website. These fonts can be included with the rest of the site’s files, alongside the images, documents, or other assets needed for that website, which means that you just need to find a resource to download these fonts from in the first place.

There are a number of “free @font-face” services available which allow you to locate fonts and download them to include on your website. Font Squirrel is the most popular of these free @font-face resources.

Free Web Font Services

In addition to free services that allow you to download a font to include with your sites files, a number of other services are available that permit you to link to the fonts files that they host on their own servers. Some of these services come with a cost, while others are offered free of charge. Google Fonts is one free @font-face service.

With Google Fonts, you can select the font that you want for a website and by embedding a line of Javascript in your site’s code, you are then able to then use those fonts on your webpages.  The process is quick and easy – in fact, using Google Fonts is actually easier to use than the aforementioned method of hosting those files on your own site/web server. The downside to using any fonts service is that you are reliant on that service. Should they decide to change their pricing model or discontinue the service altogether, you will be forced to make immediate changes to any website that you have deployed that uses that service.

Paid Web Font Services

Sometimes, the free services available for @font-face may be missing the specific fonts that you require for your projects. In these instances, you may find what you are looking for by using one of the paid services available for web fonts.

Paid web font services are typically licensed under a subscription model. You pay a certain price for access to the service and you then are able to draw from the many fonts available from that service. This often gives you access to a range of the highest quality font choices, including many not available to use with @font-face from anywhere else, but the subscription costs are something you will need to account for in your project planning and budgeting.

Typekit is probably the most well-known web font subscription service, and since the company is owned by Adobe, there is a relationship there that many web designers will be comfortable with since they are likely already using other Adobe products (Photoshop, Illustrator, Dreamweaver, etc.).

Other paid font services are available from Fonts.com, Font Deck, Web Type and others.

In addition to subscription services, there are also sites like Fontspring that allow you to make a one-time purchase of a font and download it to host on your own site.

Edited by Jeremy Girard on 1/27/17