Search code examples
htmlcssfontsfont-face

Styling a font exceeding its text bounding box

I am having issues styling a custom and fancy @font-face on a a link.

The font (Alex Brush) goes outside of its boundaries (by boundaries, I mean the clickable section in this case), which is usually not a problem for browsers. However, I have noticed that when I use a different color for the :hover state, the exceeding section keeps the non-hovered link color.

This appears on Chrom{ium|e} (I am using Chromium 31 on Ubuntu 13.10) but not on Firefox. After further testing, I notice that other strange glitches happen depending on how you play with your mouse and tabs, ...

TL;DR: you can try it online.

Or, here is some HTML you can play with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href='//fonts.googleapis.com/css?family=Alex+Brush'>
  </head>
  <body>
    <a>!</a>
  </body>
</html>

And the corresponding CSS:

a {
  font-family: 'Alex Brush';
  font-size: 400px;
  color: red;
  text-decoration: none;
}

a:hover {
  color: green;
}

Here is the glitch I get when :hovering the link:

Font glitch

Is it possible to tell the bounding box to include the entire font?

Bonus question: On top of fixing the bounding box for styling purposes, is it possible to fix it once and for all? The use case would be to have a proper clickable section that would include all the text, without using display: block or display: inline-block.

Solution

  • Interesting. I looked at a similar issue last month last month. The exact same bug was addressed there, and I've seen it happen there too.

    But in the mean time, this issue seems to be fixed. The current version of Chrome (Versie 32.0.1700.76 m) shows the glyph being properly colored on :hover. Both your example as the example in the link above now work fine. I'm pretty sure the issue will be/has been fixed in Chromium as well.

    Check out my original answer if you want to know more about what font-specifics made this bug happen.