0

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

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! :)

Community
  • 1
  • 1
Joey O
  • 315
  • 2
  • 17

3 Answers3

2

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.

ndm
  • 59,784
  • 9
  • 71
  • 110
  • I realized that even though my path to the .WOFF is correct, it still is pushing out a 404 error. I removed the absolute paths and reverted to relative paths and that appears to have fix my issue with IE10/Mozilla. Do you have an idea why my .woff path is producing a 404? – Joey O Dec 09 '13 at 16:52
  • 1
    @JoeyO'Driscoll I'm not very familiar with IIS, but if I remember correctly it triggers a 404 for unknown MIME types, in that case there should be more info the logs, see also http://support.microsoft.com/default.aspx?scid=kb;en-us;326965 – ndm Dec 09 '13 at 17:00
  • Thanks! I have a support ticket open with their web hosting provider, hopefully they can update the CORS header to validate the font type extensions sooner than later. Thanks! – Joey O Dec 09 '13 at 17:05
  • Just resolved all the issues. I'm going to vote up your responses even though Tom Hall recommended the "big picture" solution. Thank you! – Joey O Dec 11 '13 at 22:18
  • @JoeyO'Driscoll Are you sure it was really just the header config that made the server actually serve the `.woff` and `svg` files? As I said I'm not familiar with IIS, but that sounds kinda weird to me... – ndm Dec 11 '13 at 23:19
  • ndm, the font was coming up as a 404 even though the reference was correct. Once the CORS was updated, the font was no longer producing a 404 and being distributed properly. This didn't fix my font display issue, but it did resolve my .woff 404 error. Using relative paths resolved my fonts for displaying in Mozilla/IE7. – Joey O Dec 12 '13 at 19:37
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>
Tom Hall
  • 4,258
  • 2
  • 23
  • 23
  • I've submitted a support ticket regarding the server configuration for my clients web hosting provider. I will keep you updated on the results, thanks for responding! – Joey O Dec 09 '13 at 16:52
  • It appears this solution in fact resolved the error with the woff font being distributed. Thanks for your help! – Joey O Dec 11 '13 at 22:18
  • Glad that sorted your problem! – Tom Hall Dec 18 '13 at 11:06
1

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.

Wojtek
  • 436
  • 5
  • 7