No doubt about it, changing the font and font-size on your blog can make the world of difference to how it looks and your reader experience / response. One of the challenges that I have encountered when creating sites for clients in WordPress is that they like to use ‘fancy’ fonts to enhance the look. Unfortunately, these fonts don’t always translate to a ‘web friendly’ website.

The reason this happens is that when a webpage loads on a client (visitors) computer, the rendering (or display) of that page is processed by the client computer. This means that the layout commands are interpreted by the client computer and the browser in use at the time. This explains why there are variations between the different browsers, different screens and different computers.

Which brings us to Websafe fonts – what are they and how do they effect your webdesign?

Simply, a websafe font is a font that is likely to be present on the visitors computer. When you receive your computer, or reinstall it, there are a set of fonts that are installed as standard on Windows and MAC computers – it is these fonts that are considered to be Web Safe.

By using a Web safe font, you are ensuring that your website will display the way you intended it.

If you choose to use a font that is not considered ‘websafe’, the displaying computer will substitute a font for the display and the results will vary.

But what are the Web Safe Fonts? What should you be using as a standard font on your blog or website? I’ve listed below, a list of known Websafe fonts – showing you how they will display:

Arial

Arial Black

Arial antiqua

Bookman Old Style

Charcoal

Comic Sans MS

Courier

Courier New

cursive

Garamond

Geneva

Georgia

Helvetica

Impact

Lucida Console

Lucida Grande

Lucida Sans Unicode

Monaco

monospace

MS Sans Serif

MS Serif

New York

Palatino

Palatino LinoType

sans-serif

serif

Tahoma

Times

Times New Roman

Trebuchet MS

Verdana

Even though these fonts are known to be websafe, care should be taken as different computers can be customized to remove the ‘default’ fonts.

Implementing Web Safe Fonts

On a WordPress Blog these fonts are best implemented in the Style Sheet using the CSS ‘font-family’ style. They can also be used within blog posts and pages using the <span> element, For example:

<span style=”font-family:Trebuchet MS;”>This is Trebuchet MS</span> will result in the font being displayed using Trebuchet MS as shown as This is Trebuchet MS.

To use the fonts as a default style, in the WordPress style sheet, search for the string font-family and enter the Font face you wish to use. Make sure you finish the line with a semicolon (;) otherwise you will have all sorts of problems.

About the Author Charly Dwyer

Charly has more than 30 years experience in the IT industry ranging from hands-on technical, to high-level business management, Charly has installed and configured computing equipment and has managed business contracts in excess of $25 million dollars.

As a result, Charly identifies the best way to integrate solutions and technologies for the most cost effective way to achieve a businesses outcome.

Share your thoughts

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}