How to Use Fonts on the Web
by Carl Hose, Demand Media
Core fonts are most likely to show up on a web page as intended.
Core fonts are a set of fonts suitable for use on the web. This group of fonts is defined by Microsoft to be web safe, meaning they are fonts that are most likely to appear as intended on any computer platform and in any browser when viewed over the web, and that they are the easiest to read online. These fonts are the font choice for most web designers, though they are limiting as far as aesthetics go. Learn how you can use fonts on the web to ensure that your web page is viewed as you intend it to be.
Items you will need
- Core web fonts
- Graphics software
Step 1
Use core web fonts when possible. These include Times New Roman, Courier, Georgia, Verdana, and Comic Sans, among others. These fonts typically will be viewable by anyone who visits your website because they are fonts included with most operating systems. You can use a core fonts guide to determine which fonts are web safe (see Resources).
Step 2
Consider using Bitstream's TruDoc technology, which allows you to embed non-web-safe fonts into your web page. The downside is that it only works with fonts you purchase from Bitstream, and the embedded fonts are only viewable in Internet Explorer and Navigator 4 or later versions.
Step 3
Use graphics software to create text graphics. This is a useful way to ensure that any font you want to use on your website is viewable by anyone who visits. Use a graphics program like XnView (see Resources) to type web headings or body text, then save the text as an image to display on your web page. The downside to this is that your visitors won't be able to copy and paste your content because the text they see will actually be an image.
Step 4
Include a font download on your website with a note to viewers to download and install the font on their system to view your web page as intended. Upload the font you want to use on your web page to your server, making it available to anyone who wants to download and use it to view your web page with the font you used to create it.
Resources
Photo Credits
- font image by Pavel Vlasov from Fotolia.com