CSS Smooth Fonts

[johnnyphp]

Hi guys,

I’m trying to make a text look more rounded an smooth using CSS. So far, the only solution I found is using CSS and SVG, but maybe you guys know of a better way

Here’s my result so far:

and the code described here https://dev.to/codingdudecom/css-smooth-font-edges-3pbb

Do you have any alternatives?

[Archie22is]

I remember running into this issue many years ago and it had to do with how the fonts were declared or loaded.

You need to load multiple font types for various browsers and also ensure that you use:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Check this link out: https://medium.com/better-programming/improving-font-rendering-with-css-3383fc358cbc

[PaulOB]

@Archie22is

You need to load multiple font types for various browsers and also ensure that you use:

Yes I was going to recommend those but checking on my system they made no visible difference at all. It maybe why the spec was never finalised.

I’m guessing that a lot of how a font looks will depend on the users own settings on their monitor/device and indeed which browsers they will be using.

If I scale fonts up and down then I don’t see anything like the display shown in post one. It may also be the case that custom fonts are being used and these can be of variable quality also.

There is also a trick using text-shadow to blur the edges a bit but again on my screen I don’t see a visible difference.