Font changes throughout page in IE7 & earlier

Forum Moderators: not2easy

Message Too Old, No Replies

Font changes throughout page in IE7 & earlier

SLR Web Design

10:26 am on Oct 10, 2008 (gmt 0)

I have just completed a site for a customer, with CSS and Font family calibri.
Works awesome in Firefox (no surprises there). I never use IE, but my customer does and I had been very rushed and not tested in IE. I tested on their PC and Laptop both using IE6, then tested on my laptop running IE7. All 3 computers had glitches with the font in IE.

What happens:
The first line of text is in Calibri, then the rest of the page goes to some other similar font, but looks a bit off. One version of IE (customer's laptop) the font also prints on the screen larger than it should.

I cannot work out why the font changes in IE (other than its a rubbish browser that should be scrapped). Has anyone else had this issue and what can be done to fix it?

Customer needs it up and running ASAP for the website launch (big deal event with politicians etc). I am tempted to run the launch on my laptop with FF :P

BadBoyMcCoy

10:58 am on Oct 10, 2008 (gmt 0)

When testing your site you should always test on ie before you show it to a client as that vast majority of non technical web users will be using a version of it. Also Firefox has good css support whereas IE7 is not as good and IE6 is pretty bad

The correct way to use the font-family css property would be:
font-family:Calibri, "Times New Roman", Times, serif;
then the browser will go through each font untill it finds one that the user has installed. You may already know this but i wasnt sure.

do you want to paste some html and css so I (or anyone else) can have a closer look?

swa66

11:15 am on Oct 10, 2008 (gmt 0)

Running into machines not having fonts can be painful. E.g. I once thought "gill sans" was quite universally installed in the windows world (office brings it along). But every once in a while you run into a machine that has no office on it and then ... well you don't get the expected font. This is why I test new websites on a vanilla install of windows in a virtual machine (nothing more on it except for patches).

It reduces the surprises.

To fix it for a presentation: make them purchase the font for one machine. Fix the layout afterward not to require "exotic" fonts.
The set of fonts in a basic install of windows that's also there on a mac and on linux is quite small. A list of fonts in the font-family can help. But don't expect them to be fully identical.

SLR Web Design

11:50 pm on Oct 10, 2008 (gmt 0)

The font is installed on the machines, it just refuses to remain constant throughout the page.

I usually do test in FF & IE, but with lots of pressure, this one slipped though.

On the customer's PC and my Laptop running IE6 & IE7 the site looks ok, but the font does not stay the same throughout.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Carer Support Model</title>
<style type="text/css">

</style></head>

I hope this will help, if you need more of the code, please let me know.

I will upload the site soon and anyone who wishes to take a look at it in action, please PM me.

SLR Web Design

12:14 am on Oct 11, 2008 (gmt 0)

On closer inspection, it seems that IE displays Calibri slightly differently to FF. The smaller the font, the more different it looks. The text that I was looking at that stood out as a different font, was actually uppercase, and IE made it look very different to the rest of the page. FF keeps it inline with the rest of the Calibri text on the page. I should get away with it if I change it to lower case.

Another case of looking too closely and needing to take a step back and look at the bigger picture.

This still does not explain the problem with the customer's laptop displaying all text larger than normal in IE. Perhaps it is running IE5?

I even tried the View/text size/smallest and it had almost no effect.

I have left it with their IT team to fix that one, or to use another laptop for their launch.

IE frustrates me!

poppyrich

6:04 pm on Oct 11, 2008 (gmt 0)

Sounds like only one possible explanation:

The user with the inexplicably larger text is running their machine at 120dpi (Larger Font Size)

In IE6 and IE7 this setting inherits down to the browser. (In IE8 it does not. IE8's Zoom feature controls base size independently from the OS settings - with a device resolution of 96 dpi always, as per the CSS spec.)

To check go to Display Properties - Settings - Advanced and it will show you the setting.
Betcha it's 120dpi, especially if it's a laptop.

Please post if this is the case, I'm curious.

SLR Web Design

9:56 am on Oct 13, 2008 (gmt 0)

I will let you know once I have heard back from the customer. Thankyou for the help.