Search code examples
cssfontssafarifont-face

@font-face : Accented characters not displaying right - only in Safari

I am using an official webfont through @font-face on a website. Accented characters such as "é" are displaying fine in Chrome/Firefox, but they render with a default font (e.g. Arial) in Safari. The font files do include all these characters.

Chrome :

Chrome

Safari :

Safari

Here is the @font-face declaration used :

@font-face {
  font-family: 'simplon_bp_mono_lightlight';
  src: url('fonts/SimplonMono-Light-WebS.eot'); /* IE9 Compat Modes */
  src: url('fonts/SimplonMono-Light-WebS.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/SimplonMono-Light-WebS.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/SimplonMono-Light-WebS.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/SimplonMono-Light-WebS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/SimplonMono-Light-WebS.webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

I tried this solution but it didn't work : Symbols in @font-face font are not displayed in Safari 5, are displayed correctly in Safari 6 and other browsers

Am I missing something obvious?

Solution

  • OK I figured it out. It seems that the accented characters where different from the regular ones. My client might have copy-pasted text from Word (I guess), because if I manually rewrite each character, it then works. This is really strange because if I look to source HTML, the characters really look the same. This is a stupid outcome but still, maybe it'll help someone in the future. If someone has an explanation for this difference between characters despite looking exactly the same (and displaying correctly in Chrome), I would be interested to learn about this.