I have been working on a project that uses custom webfonts. The fonts appeared to render correctly in most circumstances but created a few interesting issues in Safari on the Mac.
Font Weight Appears too Light
Notice the difference in the fonts below and how the second one appears be lighter. The font in question is Nexa-Bold.
How to handle this? I added the following to my CSS and the problem disappeared:
JQuery Animation changes Font
Now this issues seems really strange. Clicking the show button seemed to pull away pixels from the text below it. The font in question is Nexa-Light.
The fix for this is simply to put a bit of padding on the top of the text. So this CSS solves the problem: