Technical Solution

Overcoming font issues on IE with DTD (Why is my site's font not being recognized by IE?)

Naveen.pl | | 1 min read

It is required of every Drupal developer to keep ahead of common browser compatibility issues. IE is probably the most notorious browser in any drupal developer’s dictionary.

IE is a very peculiar browser in terms of standards compliance. Font issues are very common on IE than elsewhere. Here is a small piece of CSS, that seems to work fine everywhere else other than IE:

#header {
	font-family:arial;
	width:1020px;
	height:120px;
	position:relative;
}

The major mistake in this CSS declaration is that ‘Arial’, the font being used here, is not considered as web-safe font. Arial is more common on modern OS's. Arial is a near-copy of Helvetica, updated slightly. Windows uses Arial in place of Helvetica.

We can overcome this by setting doctype as Transitional (Doctype is used to identify the version of the markup language used to write the current page).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This DTD tells the browser that it contain only HTML elements and attributes. Deprecated fonts, HTML elements and non standard attributes are not rendered.

If we set the DTD as

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">

It will allow deprecated fonts, HTML elements and non standard attributes. This will also fix the above mentioned issue.

Using DTD to overcome such issues is not a recommended method. It would be more ideal that we try to find a better font and write the correct class and style instead of looking for workarounds.

 

 

Related Topics