Search code examples
htmlfontsfont-facefont-sizewebfonts

font families where after typing one character the cursor still remains on the character

If you notice in this font family -http://www.fontsquirrel.com/fonts/CAC-Champagne, the 'T' almost overlaps with 1/4 of the 'U'. When I have included this font family using @font-face, and I type, the cursor types the T but remains on it only. The cursor on the web browser has changed to the arrow

This causes the problem that when I copy this text into a span with its width as 'auto', the span does not show the complete 'T' but till the point where the arrow is . Any solution for this?

Solution

  • This is a feature of the font, and it is not uncommon in script fonts. For example, the advance width of the letter “T” is considerably smaller (1,146 units, to be exact) than the width of the glyph, i.e. the width of its bounding box (which is 1,786 units). This is intentional, part of the design that makes the result resemble handwritten text.

    For inline elements containing text in this font, use some right padding to compensate for the effect. Although the effect of extending to the right of the bounding box is mostly a feature of glyphs for uppercase letters, which normally do not appear at end of word, it also occurs for lowercase letters such as “f”. A value of '0.25em' would seem to be suitable, based on the following simple experiment:

    <span style="font-family: CAC Champagne; font-size: 32pt;
border: solid red 1px; padding-left: 0.25em;
padding-right: 0.25em;">f</span>