The imported font used in Firefox is displaying with a striking underline text-decoration

I am currently using the Cardiff font in a project and attempting to apply the style text-decoration:underline to it.

While this works perfectly in Chrome (Version 35.0.1916.114), in Firefox (Version. 29.0.1) the underline appears to be crossing through the text rather than appearing under it. I suspect that this issue is related to the Cardiff font because when I switch to a 'Web Safe' font, the underline displays correctly.

This is how the Cardiff font is being presented:

When I change the font to Helvetica, this is how it looks:

I have already attempted a few solutions:

  • Wrapping the font in a span tag, styling it as a block, and assigning it a height
  • Testing out a solution mentioned in another thread

Update...

After implementing fixes suggested by @touko, I've come up with a workaround that isn't ideal but gets the job done.

I decided to use a border for Firefox and stick with regular text-decoration for other browsers.

h2 {
    text-decoration: underline;
}

For applying specific CSS styling for Firefox only, following guidelines from this source...

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

I hope someone discovers a more elegant solution than this because my current approach feels like a temporary fix at best.

cssfont-faceunderline

Answer №1

There appears to be a font problem, you might want to consider using the Font Squirrel Web Font Generator to resolve it.

Answer №2

Avoid using vertical-align: middle. The issue you are experiencing may be related to the font itself rather than a CSS problem. It's not recommended to use a hack like adding a border under the text to fix it. It would be better to search for a different font that does not cause this issue.

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>

Answer №3

To create an underline effect, consider using border-bottom and adjusting the spacing underneath with padding as needed.

Answer №4

wrapped-text{text-decoration:overline}
wrapped-text{text-decoration:line-through}
wrapped-text{text-decoration:underline}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establish starting dimensions and remember the previous sizes of allocations

I successfully implemented a draggable split panel using a code library from johnwalley on GitHub called https://github.com/johnwalley/allotment. My goal is to achieve the following functionalities: Clicking on Expand or collapse the allotment B should e ...

cssreactjspanel

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

javascripthtmlcssrange

Which CSS properties can I implement to ensure that the text remains legible regardless of the background behind it?

Looking ahead, I am displaying an issue where the colors are almost perfect, but when different percentages are applied, some or all of the text becomes obscured. My goal is to assign the font color based on the background difference. I vaguely remember s ...

css

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

javascripthtmlcss

Eliminate the cushioning on a single item

I'm currently working on a website and running into a small issue. The main page has a background with a white body in the center, containing padding for the text to prevent it from being right at the border. #content { width: 900px; overflow: h ...

htmlcssbordergallerypadding

Any tips on showing inline input within an li element?

HTML Code: <div id="choices"> <ul> <li> <label for="input_size">Input Size</label> <input type="text" id="input_size"> </li> <li> ...

htmlcss

insert a div element at a static position with a height of 100%

Adding two divs on top and bottom of a fixed div is what I need to do. To achieve this, I created a panel with a fixed position on the left side. I added the first div with the h-100 class which sets its height to 100%. However, when I try to add the secon ...

htmlcsstwitter-bootstrapbootstrap-5

How can I transfer a particular data value from a div to JavaScript within Laravel 5.0?

Displaying separate square divs based on integers retrieved from the database. This is the front-end view. I want to pass the room ID (code) to a JavaScript function when clicking on these div elements. https://i.stack.imgur.com/aIYTr.png Below is my cur ...

javascriptphpjqueryhtmlcss

What is the reason for incorporating the footer within the container?

To see the issue in question, please visit: The footer needs to span the full width. Here is the code snippet for the page: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="container"> <div c ...

phphtmlcsswordpresstwitter-bootstrap

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Recently, I've been working on implementing a breadcrumb-style checkout progress indicator on my website using a code generator created by an incredible developer named Jonas Ohlsson. This feature utilizes HTML, CSS, and jQuery and is integrated into ...

jqueryhtmlcss

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Trying to dynamically generate an unordered list from XML onto a jQuery mobile page has been a bit of a challenge for me. While I can display the items on the page, the styling never seems to work properly, only showing up as plain text with blue links. Is ...

jquerycssajax

Issues with Internet Explorer

I am currently working on an aspx page that displays perfectly in Mozilla Firefox but looks distorted in Internet Explorer. The layout in Mozilla appears like this: <form> some stuff <div class="left"> <div class="right> </form> H ...

asp.netcssinternet-explorerinternet-explorer-8

What is causing my background image to move upward when I include this JavaScript code for FlashGallery?

There's an issue on my website where adding a flash gallery script is causing the background image to shift unexpectedly. You can view the affected page here: The culprit seems to be the "swfobject.js" script. I've identified this by toggling t ...

javascripthtmlcssflash

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

IMPORTANT: Please read the latest update at the end of the question! Check out this snippet from my HTML/CSS code: html { height: 100%; } body { height: 100%; margin: 0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699 ...

htmlcssinternet-explorer

Using Material-UI to showcase a TextField with a labelWidth set to zero

I need to showcase a specific field on my website. https://i.stack.imgur.com/PJUW7.png However, the issue I'm facing is that even when the field is in focus, the border remains unaffected and does not get cut off by the label. https://i.stack.imgur ...

cssreactjsmaterial-ui

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

Is there a way to automatically edit specific lines on websites right after they load? Specifically, I want to change <div class="1"> to <div class="1" style="display:none">, and <div class="2" style ...

htmlcssgoogle-chrometampermonkey

Using more than one class at a time is causing issues

Essentially, I have a div and I want to create an exercise where I apply three different classes using vue.js. I attempted to use v-bind:class, specifically :class, but can I bind a class directly from CSS? This is what I tried: html <div :style="[my ...

javascripthtmlcssvue.jsvuejs2

What could be the reason for esbuild not being included in the installation process of a fresh Rails 7 application that

After initiating a fresh Rails 7 app, I utilized the command line syntax: $ rails new app_name --css=bootstrap An error occurred during app creation specifically when including --css=bootstrap: Install esbuild run yarn add esbuild from ".& ...

cssruby-on-railsbootstrap-5ruby-on-rails-7esbuild

Determining the exact position of an image with resizeMode set to 'contain' in React Native

I am currently developing an object detection app using React Native. The process involves sending an image to the Google Vision API, which then returns a JSON file containing coordinates and sizes of objects detected within the image. My goal is to draw r ...

javascriptcssreact-native

Angular Placeholder Positioned at the Top

Hello, I am a beginner in Angular and need to create an input field that looks like this: Everything is going fine except for the Vorname placeholder at the top. How can I place it there? Currently, I am utilizing Angular Materials. <div class='g ...

htmlcssangular