Fonts have made the most dramatic visual impact on the web since graphic support was added to browsers. A few years ago, it would be impossible to find a website using anything other than Arial, Verdana, Tahoma, Times New Roman or Georgia (or, heaven forbid, Comic Sans). While there’s nothing wrong with standard font stacks, they can become a little monotonous. Internet Explorer has supported web fonts for more than a decade but it’s taken competing browsers a little longer to catch up. Licensing is still an issue — you can’t use any commercial font — but you should be able to find one which permits web usage or is similar to your corporate style. However, with great choice comes great responsibility. Fortunately, there are several online tools which can help you locate and use CSS3 fonts…
1. Google Web Fonts
If you’ve not visited Google Web Fonts, where have you been? Google provides more than 200 fonts and the review tools are amazing.
You can download any font file but the tool also allows developers to import via an HTML link tag, CSS @import declaration or JavaScript snippet. Google highlights potential download speed issues but, since you can use their CDN, there’s little need to worry about hosting.
Did I mention that it’s all free? Google Web Fonts will satisfy the most demanding designer.
2. Font Squirrel
Font Squirrel is excellent — especially if you’re nervous about handing all font responsibilities to Google. The site provides hundreds of quality fonts which are free for commercial use. You can download TTF, EOT, WOFF and SVG font files as well as @font-face kits which provide bulletproof code and samples which work in all major browsers.
Still not satisfied? Upload a licensed font file to the @font-face generator; it’ll be handed back in multiple web formats with sample CSS code. How much would you pay for that service? It won’t cost you a penny.
3. Font Dragr<
Just because a font can be used on the web, it doesn’t mean it should. Fonts such as Helvetica and Georgia were designed to work well on-screen but not all fonts are created equal — especially at small sizes.
Therefore, you should test that medieval script font before adding it to your page. Font Dragr makes it easy — drag a font file to the page and the text will magically change.
4. FFFFallback
Not all users will be able to experience your beautiful fonts. Those with older browsers may not support web fonts and there are strong reasons why you should avoid them on mobile devices.
Fortunately, CSS supports fallback font stacks: typefaces are tried in order until one is found. However, fonts have different sizes and spacing so a particular fallback could break your design.
FFFFallback.com is a fantastic bookmarklet which shows how your site looks with different fonts. It overlays a duplicate of your page on top of the original so you can instantly spot formatting issues.
5. WhatFont
If you’ve spotted a lovely font in the wild, WhatFont is another bookmarklet which will help you identify the typeface and size. Launch the tool then hover over or click any element. What could be simpler?Bonus Font Tools
Hungry for more? If you have the time and inclination, FontStruct and Bitfontmaker allow you to create your own fonts. Both offer a range of free fonts created by talented artists. Font Matrix and Common fonts list the major typefaces and alternative fallbacks on Windows and Mac. Always check these first — there’s no need to use a web font if it’s universally available on most platforms. Do you know of any other great font tools?Frequently Asked Questions about CSS3 Font Tools
What are the best CSS3 font tools available?
There are several CSS3 font tools available that can help you enhance your web design. Some of the best ones include Google Web Fonts, Font Squirrel, Typekit, FontFace Ninja, and CSS Type Set. These tools offer a wide range of fonts and allow you to customize them according to your needs. They also provide features like font pairing and font identification, which can be very useful for web designers.
How can I use Google Web Fonts in my CSS?
Google Web Fonts is a free and open-source tool that provides hundreds of fonts. To use it in your CSS, first, go to the Google Fonts website and choose a font. Click on the ‘Select this font’ button and copy the link provided. Then, paste this link in your HTML file within the head tags. Now, you can use this font in your CSS by specifying it in the ‘font-family’ property.
What is Font Squirrel and how does it work?
Font Squirrel is a popular tool that offers a collection of free fonts for commercial use. It also provides a webfont generator that allows you to convert fonts into web-friendly formats. To use Font Squirrel, visit their website, choose a font, and download it. You can then use this font in your CSS by including it in the ‘font-family’ property.
How can I identify fonts on a webpage using FontFace Ninja?
FontFace Ninja is a browser extension that allows you to identify fonts on any webpage. To use it, install the extension, visit a webpage, and click on the FontFace Ninja icon. Then, hover over the text whose font you want to identify. FontFace Ninja will display the font name, size, line spacing, and color.
What is Typekit and how can I use it in my CSS?
Typekit is a subscription-based service that offers a library of high-quality fonts. To use Typekit, sign up for an account, choose a font, and add it to your kit. Typekit will then provide a code that you can include in your HTML file. You can use the font in your CSS by specifying it in the ‘font-family’ property.
How can I use CSS Type Set to style my text?
CSS Type Set is a tool that allows you to visually style text and generate the corresponding CSS. To use it, enter your text in the input field, adjust the settings as per your preference, and CSS Type Set will generate the CSS for you. You can then copy this CSS and use it in your project.
What are web-safe fonts?
Web-safe fonts are fonts that are likely to be present on a wide range of computer systems, and thus are recommended for use on the web. Examples of web-safe fonts include Arial, Times New Roman, and Courier New.
How can I import fonts in CSS?
You can import fonts in CSS using the ‘@import’ rule. This rule allows you to import a style sheet into another style sheet. To import a font, use the ‘@import’ rule followed by the URL of the font file in quotes.
What is the difference between serif and sans-serif fonts?
Serif fonts have small lines or strokes attached to the ends of larger strokes in a letter or symbol. Examples include Times New Roman and Georgia. Sans-serif fonts, on the other hand, do not have these lines or strokes. Examples include Arial and Helvetica.
How can I ensure that my fonts are accessible to all users?
To ensure that your fonts are accessible to all users, use a font size that is easy to read, choose a font color that contrasts well with the background color, and use web-safe fonts whenever possible. Also, consider providing options for users to adjust the font size and color according to their preference.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
