问题

I've been running into multiple issues with utilizing custom fonts at the following location:

www.shawmut.com/happyholidays

I ran into an issue yesterday with Mozilla Firefox and it not displaying a custom font I was linking to our AWS S3 Bucket, which I resolved by hosting the fonts of our actual web server. Now, I'm experiencing an issue with IE9/10 where the fonts are not displaying once again. I found the following discussion here: IE9 Refusing to Load custom font? which somewhat touches on my issue, however, I'm not running an Apache or a nginx setup, I'm on IIS (without actual IIS access).

Here is the CSS code:

/* GOBOLD */
@font-face {
    font-family: 'Gobold';
    src: url('www.shawmut.com/happyholidays/fonts/Gobold.eot');
    src: url('www.shawmut.com/happyholidays/fonts/Gobold.eot#iefix') format('embedded-opentype'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.eot?') format('eot'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.woff') format('woff'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.ttf') format('truetype'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.svg#Gobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* MOTION PICTURE */
@font-face {
    font-family: 'MotionPicture';
    src: url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot');
    src: url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot#iefix') format('embedded-opentype'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot?') format('eot'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.woff') format('woff'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.ttf') format('truetype'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.svg#MotionPicture') format('svg');
    font-weight: normal;
    font-style: normal;
}

Can someone PLEASE assist me with resolving this issue, it's kind of driving me bonkers! :)

回答1:

CORS

Start by using relative paths, you'll run into problems when someone accesses your site with a non www prefixed URL, as some browsers then won't load your font because of cross origin resource restrictions.

Of course this could be fixed by sending proper headers, but sticking to relative paths is the smarter option here.

See also https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

Content types

Make sure that your server sends the proper Content-Type headers, browsers can be picky about that.

.ttf  > application/octet-stream
     or application/x-font-ttf
     or application/x-font-truetype

.eot  > application/vnd.ms-fontobject

.woff > application/font-woff

.svg  > note sure, probably image/svg+xml

Missing files

Also some files are not available, specifically the .woff and .svg ones, so in case the .eot ones cannot be used (there are a lot of EOT fonts around that do not comply with the Microsoft standard, often produced by font converters) there is no fallback available.

Developer tools

In case the above doesn't fix the problem, check the network and console tabs in the developer tools, they might give you a clue in case the font files are really not being loaded/used.

回答2:

I've run into similar problems with custom fonts, one of the things I put in place was an outbound URL rewrite rule so that when fonts were requested, the server would add a CORS header. This seems to have fixed the problem for me, so it's worth a try.

You'll need URL Rewrite installed on your web server (http://www.iis.net/downloads/microsoft/url-rewrite) for this to work.

<configuration>
    <system.webServer>
        <rewrite>
            <outboundRules>
                <rule name="Fonts CORS">
                    <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
                    <conditions>
                        <add input="{REQUEST_URI}" pattern=".*\.(ttf|otf|eot|woff|svg)\?*.*$" />
                    </conditions>
                    <action type="Rewrite" value="*"/>
              </rule>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>

回答3:

We tried all proposed solutions and spent hours researching why our custom font with icons doesn't load in IE9 for some of our website users -- only to find out that it was the security setting in IE9 which prevented the font files from being loaded.

Going to Internet Options > Security > Internet > Medium fixed the issue, all the custom icons loaded and looked perfect like in the most modern browsers.

Please note that we don't use Windows, we only use it for testing through Parallels on a Mac, but I hope it will save some time for at least some of you.

来源：https://stackoverflow.com/questions/20425523/custom-fonts-not-displaying-within-ie9-ie10

标签

iis