Looking to incorporate Google's Webfont entitled "Abril Fatface" along with some letterspacing into a webpage design.
Encountered some unusual behavior in this process.
The letters t and f don't seem to follow the letterspacing setting when they are consecutive. However, they behave as expected when surrounded by other letters. This anomaly appears to be specific to the letters t and f.
Any explanation for this phenomenon?
Tested the same scenario with the default browser font (Segoe or Arial) and it worked correctly there. Is this a deliberate choice with a rationale that I am unaware of, to not apply letterspacing in such cases? Or is it possibly a bug related to the webfont?
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
.fatface {
font-family: 'Abril Fatface', serif;
}
.wide-text {
font-size: 100px;
letter-spacing: 70px;
}
.small {
font-size: 40px;
letter-spacing: 20px
}<div class="wide-text">
<div class="fatface">botottle</div>
<div>botottle</div>
</div>
<hr>
<div class="small">
<div class="fatface">
aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz
</div>
<div>
aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz
</div>
</div>