Is there some way get my fonts to appear heavier on Safari? Screenshot shows Chrome ( on top ) vs Safari ( on bottom)
The two browser have a different rendering engine. Issues with fonts are common. Read here, people try many fixes for this, but it involves declaring some CSS in code : css - Same font except its weight seems different on different browsers - Stack Overflow
1 Like
@vincent . Thanks for the link. I wasn’t able to get a fix for this yet, though I tried a bunch of different scripts that I found online. If anyone finds a script that works, let me know!
I have a mention in all of my contracts about fonts rendering, for 6 years now. It states that if we can’t correctly render a font exactly like the pixel designs, on one or several bowsers, either we accept the fact, either we switch to another font or weight. Because we had clients who DEMANDED that the font render like the designs, to the pixel. Was it clever to demand that? Oh no it wasn’t. Did we end up using Flash to render their fonts? HELL YES!
2 Likes
Good idea to included that in the contract. I wouldn’t have thought of it. It does irritate me to have this font weight issue, but living with imperfection is better than using flash, IMO.
1 Like
You have a valuable opinion 
@angela I had the same problem, a very dramatic difference as shown below between chrome and safari text rendering – and in background color too!
safari rendering:
chrome rendering
BUT.
I think I figured it out … I went to the Custom Code section of the Site Settings, and in the “add code to head tag” field and added this:
<style>
body { -webkit-font-smoothing: subpixel-antialiased; }
</style>
And this was the outcome of the changes in safari:
Works like magic for me!
5 Likes
@jaidenraleach
Hi Jaden,
Thanks for the tip! I tried it and it does work to bump up the thickness a bit. It’s a great solution for a lot of situations- However, I did notice that the text itself becomes thicker because the text becomes less smooth and more jagged in safari.
It might be hard to see in the screenshot, but the top is the thickened version, which should appear more jagged ( but converted to jpg, and uploaded here, it isn’t as obvious).
The bottom version is the one without the code added. It’s a bit smoother.
It’s a subtle difference, but depending on the font used, it might or might not be better with the code.
In my case it actually looked a bit better thinner, but not jagged.
If you look closely at your fonts, do you see a bit more jaggedness, compared to Chrome or Firefox?
Again, thanks for posting the tip!
Cheers,
Angela
Hey Angela!
You’re welcome!
I see what you mean by the jaggedness. I would guess that it is emplefied with your specific font. With my font I can see no difference at all in the smoothness unless I zoom way in on safari to compare.
Here is a shot of chrome on the left fourth, and safari taking over the right 3/4 of the text zoomed at 175% - I notice relatively no difference with the font I’m using.
I can definitely see how with other fonts it could be an issue, depending on how the font handles sub pixel rendering.
I’m pretty novice on this technique, just stumbled upon it the other day, not sure if there is any other option that might work better. @thesergie @callmevlad might have some sort of idea 
1 Like
I think fonts with a lot of curves or italics might not work as well. Your fonts seems to be fine.
Not sure if there is a perfect solution for this. Another thing I noticed is the Header text (H1, H2, etc) actually appears thicker in Safari than in Chrome, but regular and paragraph text appears lighter. I tried thickening the text by changing all text to Header Text, which worked for Safari, but caused problems in Firefox- it was reading as too thick there.
Would love for a better solution to this font rendering issue.
Yea totally. Safari needs to get it’s act together lol. Hopefully there is a better solution. I’d be hesitant to turn everything into header texts even if it did work because I’d think it would be counter intuitive for SEO, maybe I’m wrong though.
On a side note, I asked my computer if it could just stop being a pain and render fonts the same in all web browsers, but:
4 Likes
I got a good laugh out of that gif.
1 Like
Haha glad you did, me as well!
I am having the same issue BUT I love the way the fonts look in Safari and am slightly devastated by the Chrome handling of the font. I designed the site with Safari, so I didn’t see the Chrome version until today…
This is the Safari look…
And the Chrome look…
So which browser is “correct”??? From what I have read here this is an ancient dilemma…
it’s the same issue brought up here.
http://forum.webflow.com/t/how-different-browsers-process-gradients/9683
Gradients and Fonts… different browser render the images and text in different ways.
You could try
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
or
html .safari a {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
See if either of those help.
1 Like
Am I understanding this code correctly that this will add width or volume to the font?
@Tobias Yes…sort of. It’s basically adding a text shadow that makes the fonts look more consistent…smaller. I usually use the first bit of code and it’s not necessary with all fonts but it does help.
…just paste it in custom code before the body section?
Place it in the Head Code area…like so.
<sytle>
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,.004);
}
</style>