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.

Safari Correct Font Rendering

Safari Incorrect Font Rendering

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.

Safari Mac Dropdown Glitch


The fix for this is simply to put a bit of padding on the top of the text. So this CSS solves the problem:

padding-top: 2px;