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.
0 comments