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.
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 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 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.
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.
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!
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.
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.
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:
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.
This font finder site provides suggested font matches based on interpretations of an image or a url you provide.
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.
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.
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.
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.
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.
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.
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.
Cool! Thanks for sharing these webfont tips!
A great list.
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.
Nice article, Thanx for sharing..
These designs are still good for today’s internet marketing.
Fonts plays an important role in the websites.