Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@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?

like image 743
guylabbe.ca Avatar asked Nov 28 '22 22:11

guylabbe.ca


1 Answers

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.

like image 51
guylabbe.ca Avatar answered Dec 04 '22 11:12

guylabbe.ca