1

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:

  • Wrapping the font in a span tag, then styling this as a block and giving it a height
  • I've also tried a solution provided in another question

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.

Community
  • 1
  • 1
LiquidB
  • 93
  • 1
  • 1
  • 6

4 Answers4

1

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.

Joe Taylor
  • 579
  • 1
  • 6
  • 21
  • I originally used this to convert the TTF file to the other formats. I could possibly try re-downloading all the original files though. – LiquidB Jun 02 '14 at 10:16
  • I think it also allows you to customise how the webfont is formatted, I'm not sure if that might give you some options to fix this? – Joe Taylor Jun 02 '14 at 10:19
  • I don't think it's the font though, as both Chrome and Safari are displaying it correctly. – LiquidB Jun 02 '14 at 10:22
  • Some browsers use different font files though, so some may be formatted differently. If it were due to your CSS it would theoretically have a similar effect on all fonts – Joe Taylor Jun 02 '14 at 10:24
  • I believe Firefox, like Chrome uses TTF by default, although I'm not sure. If this is true though, Chrome should be having the same issue. – LiquidB Jun 02 '14 at 10:30
  • There's a browser support table on here (not sure how up to date it is) http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/. The support does vary so, depending on the ordering of your font files in your @font-face rule, Chrome and Firefox could be using different files. – Joe Taylor Jun 02 '14 at 10:37
  • Thanks for the reference. I've altered the ordering so that TTF comes first, this still hasn't fixed it. – LiquidB Jun 02 '14 at 10:56
  • I uploaded the font *.otf file to Font Squirrel and downloaded it again using "basic". It fixed the underline issue in firefox... :-) – Jette Nov 08 '16 at 08:30
1

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>
Community
  • 1
  • 1
FDisk
  • 8,493
  • 2
  • 47
  • 52
0
yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}
user229044
  • 232,980
  • 40
  • 330
  • 338
Kisspa
  • 584
  • 4
  • 11
  • I've tried all 3, underline and line-through appear to have the same results, where as overline does actually appear above the text. – LiquidB Jun 02 '14 at 10:06
0

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

touko
  • 1,957
  • 1
  • 11
  • 10
  • I thought about this, however in this case it just wouldn't work because 90% of the time the text will drop on to 2 lines or more. – LiquidB Jun 02 '14 at 10:27
  • just add display:inline; to styling and it fixes the problem! – touko Jun 02 '14 at 10:29
  • This has fixed the issue on Firefox but the border is lower down on Chrome and Safari than Firefox. I could use conditional formatting to correct this but I was hoping for more of a global fix. – LiquidB Jun 02 '14 at 10:35
  • I'm afraid you won't find a better solution to your problem if you're intending to use cardiff font. – touko Jun 02 '14 at 10:38
  • Have you tried using this font before? I'll more than likely use this solution at the moment. – LiquidB Jun 02 '14 at 10:57
  • Haven't tried using this font, had a similar problem though when I wanted the underline to be slightly lower than normally. – touko Jun 02 '14 at 11:11
  • The links on http://magicofcss.com site solve this using text-shadow and a linear-gradient background-image. – Adam Nov 01 '14 at 04:24