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 :
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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With