Best Font Resources for Web Design and Tips for Implementation

So you want a custom font-face for your website. This is a great way to set your design apart and give your work a unique look and feel. There are a number of ways of getting that special font on your site the right way, but many more ways of doing it wrong.

Best Font Resources for Web Design and Tips for Implementation

Besides picking a font that is readable on both desktops and mobiles, you need to think about search engines as well. In the past, designers used graphics when they wanted to use special fonts. But graphics are generally unreadable by search engines. Instead, the modern technique is to use CSS to modify a standard heading tag or paragraph text to get that font you want.

This article lists a number of resources for finding, converting, and implementing a custom font for your website so you end up with the perfect look. The techniques center around CSS for implementing the font you choose.

Font Selection Considerations

Just because you can, doesn’t mean you should. You may be able to use a custom font for every level of heading or for other graphic elements, but each font family must be downloaded by the site visitors. This often mean that the text does not display until the font family has downloaded. So one of the chief considerations when selecting a font is your audience – do they want to wait to download several MB worth of font files while your site loads?

Readability is another chief concern. Script and handwritten fonts can be very interesting visually, but that doesn’t mean you should over-use them. Keep title fonts clean and easy to read – usually a sans-serif font is ideal for headings.

For body text, make sure the font is very easy read. You may have to adjust line-height settings and the like to get a custom font to sit right on the page. Typically a serif font is appropriate for body text, but this is very dependent upon the font itself. Test your final font selection on several screen sizes and devices to be sure that its default size on your site is readable.

Font Conversion Tools

If you have a font family on your computer, you can convert it to work on the web (as long as you have the legal right to use the font). Converting fonts into a webfont has gotten easy with various tools available, depending upon your needs.

Font Squirrel

instantShift - Font Conversion Tool

Font Squirrel is an all-around wonderful site for all things fonts, but their font-face generator is a great tool for uploading any font file and converting it to a webfont. The process is fast and the result is a complete webfont with instructions for implementing on your site – even a sample stylesheet is included.

FontJazz

instantShift - Font Conversion Tool

FontJazz is a simple tool for uploading a font file and converting it to a webfont. The result is a Javascript file and your converted fonts. Once uploaded to your server and the files in place, anything in heading tags will use the fonts you converted. The fonts on your webpage remain selectable and search engine friendly.

Font2Web

instantShift - Font Conversion Tool

A simple tool for quickly converting fonts. The result is a folder with sample CSS and your font files ready for upload to your server. It doesn’t get any easier.

Font Sites

Now that you know you can convert just about any font to a webfont you can implement using @font-face CSS, the next step is picking your ideal fonts.

Google Webfonts

instantShift - Font Sites

If you don’t want to go through the process of converting or hosting your webfonts, let Google do it! The Google Webfonts project currently has more than 500 free webfonts and multiple ways of implementing on your site. Just pick your design and the method you want to use to implement (CSS @import, CSS link, or JavaScript). Google even has a Page Load meter to give you an idea of how long it will take users to download a font!

Urban Fonts

instantShift - Font Sites

With hundreds of free for commercial use and paid fonts, Urban Fonts is a often a first place designers go to for interesting, well-designed fonts.

Dafont

instantShift - Font Sites

Loads of free fonts and a great way to quickly filter for the look you’re going for. Note that the fonts are free, but sometimes have limited use licenses, such as free for personal use only.

Font Squirrel

instantShift - Font Sites

One of the best resources for commercial fonts. The fonts are well-designed and the on-site font-face generator makes it easy to get the right fonts converted and on your site fast.

Font Identifiers

Did you find a font that you really like and want to use it or a similar one for your upcoming project? Just plug it into a font identifying tool to see what suggestions it comes up with. While these font indentifiers never can interpret the exact font of the image or information you submit, they get quite close most of the time. Here are some of the best:

Bowfin Printworks

instantShift - Font Identifier

This tool finds serif fonts based on the information you provide on the shapes for each letter tag and flag. Each serif font match includes information about the designer and year it was designed and other relevant information.

WhatFontIs.com

instantShift - Font Identifier

This font finder site provides suggested font matches based on interpretations of an image or a url you provide.

Identifont

instantShift - Font Identifier

This font identifying site finds fonts for you based on answers to questions it asks. Depending on your answers, the survey is approximately 12 questions long and can be fine-tuned using the filter.

What the Font

instantShift - Font Identifier

This font finder tool is from MyFonts.com and works a bit like the WhatFontIs site. You provide an image or URL and it suggests font matches based on interpretations of the image.

Font Implementation Tools

So you’ve got your fonts selected, the files converted, and you’re wondering what to do next? Implementing the fonts properly can be a bit of a technical challenge if you haven’t been through the process before. This stage is somewhat dependent upon how you want to get the fonts on your site. While we could discuss Javascript, we’re going to stick with CSS. More specifically, the @font-face function will be discussed so you can get these fonts on your site as fast as possible with the greatest level of support across browsers.

Step 1 – Upload all your files

You will need the ability to get your files onto your site. It doesn’t matter where you place the files as long as you can access the files using a URL reference: http://yoursite.com/fonts or something along this line is fine.

Step 2 – Adding the @font-face to your CSS stylesheet

You can place this code anywhere in your CSS stylesheet, but it’s typically best to put it at or near the top of your sheet so you can quickly remove it if you change the font or simply don’t want to use the @font-face function anymore.

@font-face {
font-family: 'font name';
url: ('http://yoursite.com/fonts/yourfont.ttf');
}

Of course, replace the font name and URL with the link to your file you uploaded in Step 1.

Step 3 – Defining your font

Using the Head 1 tag as an example, here’s how you would reference your new font-face:

h1 {
font-family: 'font name';
}

Replace the font-name with your font as defined in the @font-face definition. Now, anywhere you use the <h1> tag, the font will be your webfont! Who knew that uploading fonts optimized for web design could be so easy? However, if this coding is still intimidating, try using one of the following font replacement kits.

Font Replacement Kits

While you can write your own code and prepare your fonts on your own, it may be more beneficial to you to use a replacement kit.

Font Squirrel

instantShift - Font Replacement Kit

This one was listed above in the Font Sites section, but it is also such an amazing resource for @font-face kits. These font kits for web design include all of the formats necessary for making a font work across multiple browsers and also provides the CSS and HTML you need.

Google Webfonts

instantShift - Font Replacement Kit

Okay, this one was also listed above in the Font Sites section, but it too is an excellent go-to for easy implementation of fonts onto websites. Just add a font to your collection and use the code they provide to add it to your layout with ease.

TypeKit by Adobe

instantShift - Font Replacement Kit

While you have to pay a yearly subscription fee for this font resource, you get access to a very large database of very professional fonts along with kits for uploading them to your website designs.

Fonts.com Web Fonts

instantShift - Font Replacement Kit

This subscription service has a free, $10 standard, or $100 professional monthly plan. All plans allow for an unlimited number of fonts to be used on unlimited websites. However, the free version limits you to only about 3,000 fonts in their database, and the professional allows for 50 desktop downloads per month.

FontDeck

instantShift - Font Replacement Kit

If you have no need for the thousands of fonts available with a monthly or yearly subscription, you can instead pay a subscription for individual fonts. FontDeck is one of the best font-by-font subscription service. It’s database is enormous and you do not have to pay for a bunch of fonts you’ll never use.

In the past, fonts for web design were limited to three, maybe four fonts and images of fonts if you wanted a page to load within a reasonable amount of time. Thankfully we have come a long way in such a few short years, and, hopefully, we will continue to find even better ways to incorporate all the fonts we desire for web design in the near future.

Like it? Share it.

6 Comments

  1. Cool! Thanks for sharing these webfont tips!

  2. A great list.

  3. Fonts plays an important role in the websites. Different font designs are there, people use different tools for it. You have mentioned some font conversion tools in your article and there are also some steps to use the tools, which is very easily understandable and usable.

  4. Nice article, Thanx for sharing..

  5. These designs are still good for today’s internet marketing.

  6. Fonts plays an important role in the websites.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>