I have a webpage that uses Google's Open Sans font. The webpage also uses an HTML entity for the trademark symbol (™).
In Internet Explorer 7, this entity is not displayed using Open Sans, it is displayed in a serif font:
Here is a short page that reproduces the problem:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700" />
<![endif]-->
<style type="text/css">
* {
font-family: "Open Sans", Arial, sans-serif;
}
</style>
</head>
<body>
<h1>This is trademarked™</h1>
<p>This is trademarked™</p>
</body>
</html>
Using the entity ™ results in the same problem, as does using a literal ™, but oddly enough the ® entity displays correctly.
Is there anyway to get this entity to render either in Open Sans, or if that fails, in a sans-serif font?
Both Open Sans & Arial don't have entities, so your browser will default to a system font for them. Try adding some alternative system fonts in your lineup: