Rounded edges on fonts with CSS - html

Question

Is it possible to transform a font with CSS to have rounded edges?
I'm talking about an effect similar to this smooth edges in Photoshop
So far I tried using a SVG filter, but it seems a bit complicated.
Is there a better way?
The code for the SVG filter used is this:
<svg viewbox="0 0 100% 100%">
<defs>
<filter id="smooth">
<feMorphology operator="dilate" radius="0" />
<feGaussianBlur stdDeviation="3" />
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 1 1"></feFuncA>
</feComponentTransfer>
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 1 1"></feFuncA>
</feComponentTransfer>
<feComponentTransfer out="rounded1">
<feFuncA type="table" tableValues="0 0 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in2="rounded1" in="SourceGraphics" operator="in"/>
</filter>
</defs>
</svg>
and the explanations are here: https://dev.to/codingdudecom/css-smooth-font-edges-3pbb

Answer 1

One possible solution is using a goo filter like so. As an observation you need to know that for a different font and a different font-size you may need to change the values of the feColorMatrix and stdDeviation
div {
height: 200px;
padding:10px 60px;
font-size:200px;
font-family:Arial;
filter:url(#goo);
}
svg{position:absolute;}
<svg width="0" height="0">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
<feColorMatrix mode="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 35 -7" />
<feBlend in="SourceGraphic" />
</filter>
</defs>
</svg>
<div>
<span>A B</span>
</div>
Please read about The Goeey Effect