CODEWITHSUNDEEP
cssfont-faceunderline
LiquidB
LiquidB

Reputation: 93

Underline text-decoration is crossing through the imported font used in Firefox

I'm using the font Cardiff in a project and trying to apply the style text-decoration:underline to it.

This works fine in Chrome (Version 35.0.1916.114) but Firefox (Version. 29.0.1) the underline is crossing through the text instead of appearing under it. I believe it's something to do with the Cardiff font because when I try a 'Web Safe' font the underline is displayed correctly.

This is how the Cardiff font is being displayed

cardiff font

If I then change the font to Helvetica, this is how it's displayed

helvetica font

I've tried a few things already:

Updated...

Using fixes provided by @touko I've put together a solution that isn't really what I wanted to settle for but it works.

I've used a border for Firefox and regular text-decoration for other browsers.

h2 {
    text-decoration: underline;
}

Firefox specific CSS styling as explained on this solution...

@-moz-document url-prefix() {
    h2 {
        text-decoration: none;
        display: inline;
        border-bottom: 1px solid #4c2f04;
        padding-bottom: 6px;
    }
}

I hope someone finds a better solution than this though because it's more of a bodge job if anything.

Upvotes: 1

Views: 2179

Answers (4)

FDisk
FDisk

Reputation: 9416

Just dont use vertical-align: middle The similar problem is here: Link underline appearing above text in Firefox? But looks like your problem is with a font itself. I do not recommend to do a hack like border under the text. Search for other font.

body {
  font-family: Cardiff;
  font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="//db.onlinewebfonts.com/c/5762715ddcc2993805a83fcd2f569ea8?family=Cardiff" rel="stylesheet" type="text/css"/>
</head>
<body>
  <a href="#">Demo text</a>
</body>
</html>

Upvotes: 1

Kisspa
Kisspa

Reputation: 584

yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}

Upvotes: 0

touko
touko

Reputation: 2047

You could use border-bottom as underline and set the space below to desirable with padding.

Upvotes: 0

Joe Taylor
Joe Taylor

Reputation: 579

Seems like an issue with the font, you could try running it through the Font Squirrel Web Font Generator to see if that fixes it.

Upvotes: 1

Related Questions