Advertisement

How to Find Web-Safe Fonts for Your WordPress Content

Web-safe fonts are fonts available on a reader’s computer system. Get to know the common fonts that exist within all operating systems to ensure each reader views your website as intended. The concept of web-safe fonts is easy to understand if you keep in mind that for a font to appear correctly on your WordPress website for all your readers, the actual font used must be a system font on that reader’s computer.

Make sure your font is web-safe

The web is actually kind of picky about how it displays fonts and what kind of fonts you can use because not all fonts are viewed correctly on the web. If a font doesn’t exist on the reader’s computer, the web browser he’s using automatically displays the default font set in his web browser options. You need to know the common fonts that exist within all operating systems to ensure each reader views your website the way you intended.

The following table illustrates some common fonts that are safe to use in your style sheets and website content areas:

image0.jpg

You’re not restricted on the type of fonts and font styles you can use on web graphics, including logos, header images, buttons, and so on. Because those are graphics rather than dynamic content generated by the user’s web browser, the fonts you use in graphic design always display as you intend. Web-safe fonts refer only to font families that you include in the style definitions in the CSS for the website format.

Font replacement technology

With basic CSS practices, you are restricted on the types of font families that you can use and display in your web design projects. However, there are some really nifty tools that use plugins for WordPress that allow you to replace standard, web-safe fonts with a font of your choosing. Normally, the only fonts you’d be able to use are fonts that are typically included in most of the major operating systems, but here are some WordPress plugins you can use to replace those fonts with any font you would like and make sure it displays correctly in your users’ browsers:

  • WP Cufon: This plugin for WordPress makes it easy to use the Cufon JavaScript tool to convert your favorite font files to regular text on your WordPress website.

  • Typekit Fonts for WordPress: This plugin allows you to easily embed fonts from Typekit (http://typekit.com) on your WordPress website. You can replace some, or all, of the fonts that handle text within your content.

  • Facelift Image Replacement (FLIR): This plugin replaces text on your WordPress website with an image created by your chosen font files, essentially turning your text into images generated using JavaScript allowing your text to get displayed using the font of your choice.

The best way to discover the type of font you want to use for the content of your website is to try different fonts in your stylesheet to see which one you like best. A real handy tool is the Typetester. On its website, you can insert a paragraph of text and then easily change the font styles in the web browser with its tools.

image1.jpg

The Typetester website is an especially handy tool if you have no idea what type of font you want to use. Go to that website, test the various fonts available, and then choose from among your findings.

blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com