Symbols in @font-face font are not displayed in Safari 5, are displayed correctly in Safari 6 and other browsers

Question

I'm having a weird issue with the displaying of quotes and accents in Safari 5. I'm using a font-face font with the following code.

@font-face {
    font-family: 'MendozaRomanStd-Book';
    src: url('fonts/mendozaromanstd-book.eot');
    src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
             url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
             url('fonts/mendozaromanstd-book.woff') format('woff'),
             url('fonts/mendozaromanstd-book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

On Firefox, Chrome, Safari 6, iOS6 and IE the font are displayed correctly:

On Safari 5 however I'm seeing this:

Same charset, same html. I've searched everywhere for reported issues with font-face displaying under Safari 5 but there aren't any reports leading me to suspect something else is going on. Anyone have any idea what could going on here?

Answer 1

Turns out Safari 5 does not show accents or symbols in SVG fonts.

It does show them when using TTF or WOFF fonts, but not in SVG.

Chrome or Safari 6 do not seem to have this problem.

I ended up fixing it by defining a separate font with @font-face, and then targetting Safari 5 with browser specific CSS. So:

/* Font-face for all browsers */
@font-face {
    font-family: 'MendozaRomanStd-Book';
    src: url('fonts/mendozaromanstd-book.eot');
    src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
         url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
         url('fonts/mendozaromanstd-book.woff') format('woff'),
         url('fonts/mendozaromanstd-book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    /* Safari5 fix */
@font-face {
    font-family: 'MendozaRomanStd-Book2';
    src: url('fonts/mendozaromanstd-book.ttf') format('truetype') !important;
    font-weight: normal;
    font-style: normal;
}

.safari5 body {
font-family: 'MendozaRomanStd-Book2', Times new roman, serif;
-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
}

Please note that this code already contains a fix to enable correct rendering of webfonts in Chrome under PC. With the standard fontsquirrel generated code, this leads to horrible jaggyness and not aliased fonts. Until Google can get its act together, a fix is to elevate the SVG file to the top.