Safari font rendering issues
Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:
font-weight: 400;
Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.
OSX Safari VS Chrome font rendering difference
Two possibilities at first glance:
- The otf format is not supported by Safari
- There's no bold or 700 version of font Brandon provided, browsers try to mimic the bold version, which may vary in the rendering result. You may try to disable it by adding
font-synthesis: noneto text or providing the bold version of your font.
Font rendering issue on iOS 10 safari (mobile)
Found a workaround, I just re-download the .otf font and convert it to .woff again and it worked. Seems like the old .woff font has some compatibility issue and broken in iOS 10.
Related Topics
CSS Negative Z-Index: What Does It Mean
Inline CSS Formatting Best Practices - Two Questions
Override Rmarkdown Theme in Order to Change HTML Page Width
List of CSS Features Not Supported by IE6
Less/Sass Debugging in Chrome Dev Tools/Firebug
CSS Selectors Ul Li a {...} VS Ul > Li > a {...}
Difference Between Width and Device-Width in CSS Media Queries
Open a File in Visual Studio's CSS Source Editor
Are There Any Practical Reasons to Use "Em" Instead of "Pt" Font Size Units
What Is the '.Well' Equivalent Class in Bootstrap 4
Internet Explorer 8 Shows Gradient Instead of Background Image
How to Create Multiple Box-Shadow Values in Less CSS
Fixed Header Position in Bootstrap 3 Modal
Twitter Bootstrap: Center Text on Progress Bar