You are here

Fonts with Internet Explorer

Using a Mac and assuming the 'Website in a Box' worked 'out of the box' I hadn't noticed that fonts didn't display correctly in Internet Explorer. The Healthwatch distribution comes packaged with 'Font your Face' a Drupal module that allows web font services to be used on the site. These services provide a wider range of web fonts - before CSS 3, fonts were limited to a very narrow range of web safe options. These were fonts that were guaranteed to be avialable on a visitor's computer.

Given that Trebuchet MS has always been one of the traditional web fonts and that the font is the second choice in the Healthwatch branding guidelines, the inclusion of 'Font Your Face' in the Website in a Box, is on the face of it not necessary.


Additionally, despite being a core web font it has actually been included in the package and is called into the style sheet using the CSS 3 @font-face rule. This is essentially unncessary as Trebuchet MS should already be available to most, if not all systems. If it isn't the likelihood is the user has removed it. Internet Explorer doesn't actually support TrueType fonts using the @font-face rule, so this explains why it is not being picked up. The simple solution is to go to sites/all/themes/myhealthwatch/css/global.css and comment out the @font-face rule at the top of the file - this is done by adding /* above and */ below the block of CSS code.

Aggregated CSS Files

The distribution is set by default to aggregate the CSS files. This is a performance setting, but it means any changes to the CSS will not be picked - the actual CSS file being used has been cached by the system. So, go to Configuation > Performance and uncheck aggregate and compress CSS files. Save, and then check the CSS loads. If not, try clearing all caches using the button at the top of the Performance screen. Once the CSS change has been picked up, re-check the option to aggregate the CSS files and save.

Font Family

Whilst editing the CSS it may be a good idea to extend the font family. Due to the potential of a font not being available to a system, CSS provides for a family of fonts to be set rather than a single font - the browser will use the first available font. The style sheet, however, only provides for Trebuchet MS:

body{font-family:'Trebuchet MS';color:#4d4d4d;line-height:1.5;background:url(images/background_commas.jpg) repeat;}

Changing this to:

body{font-family:'Trebuchet MS', Arial, sans-serif;color:#4d4d4d;line-height:1.5;background:url(images/background_commas.jpg) repeat;}

will ensure a sans-serif font is always used, with Arial being the next best choice in the event that Trebuchet is not available. Note, through that the font family is explicitly set for other elements, such as h1, so these would need to be amended in the same way.