Search code examples
htmlcssinternet-explorerfont-face

Custom Symbol Font not displayed in IE

The following setup

HTML

<!DOCTYPE html
SYSTEM "about:legacy-compat">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>SymbolTest</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="HandheldFriendly" content="true">
    <meta http-equiv="cleartype" content="on">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <span class="greek">μ ω Ω ≥ ⊗ ↔  ± √ ≠ ♦ ♥ ♠ ⇐ ⇒ ⊥ ♦ ⊆ ∅</span>
    </body>
</html>

CSS

@font-face {
  font-family: Symbol;
  src: url("../fonts/Symbol/symbol.eot");
  src: url("../fonts/Symbol/symbol.eot?#iefix") format("embedded-opentype"), url("../fonts/Symbol/symbol.woff2") format("woff2"), url("../fonts/Symbol/symbol.woff") format("woff"), url("../fonts/Symbol/symbol.ttf") format("truetype"), url("../fonts/Symbol/symbol#symbolregularregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
span.greek {
  font-family: Symbol;
}

Produces very weird results in Internet Explorer compared to other browsers;

Crome, Local

Chrome, Local

Chrome, Server

Chrome, Server

FF, Local

FF, Local

FF, Server

FF, Server

IE10, Local

IE10, Local

IE10, Server

IE10, Server

IE11, Local

Asks me wether I want to allow ActiveX components - Note that in the background, the font used is the default windows Symbol font...

IE11, Local, Before

After clicking "accept", it changes to

IE11, Local, After

What is going on here? I created the font using FontSquirrel and used the "bulletproof" @font-face syntax, but it's still not working as expected...?

Solution

  • After further investigation, the issue seems to be resolved. As Mr Lister pointed out, IE itself apparently doesn't like when you paste UTF8 symbols and wrap them in the Symbol font.

    I checked into the Symbol font with a designer colleague and it appears that IE tries to actually use the typed character (e.g. U+221A which is SQUARE ROOT) and maps it against the used font - Symbol.

    Symbol obviously doesn't have a proper character for the character at code point 8730 - because Symbol only supports 255 characters.

    This means, IE will display a ? instead.

    The insteresting point here is, that the other browser fall back to the default font and use the UTF8 value of the character and display it properly.

    The solution we now use is to not use any font, as the whole publication process is UTF8 anyway, so there is no need to actually use the Symbol font anywhere. We just copy all characters as they are, and it works.