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

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...

javascriptjqueryhtmlcssajax

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

javascripthtmlcss

Is it necessary to include the Roboto font when using MUI?

After reviewing the Material UI documentation, it appears that users are responsible for loading the Roboto font: Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Googl ...

cssreactjsmaterial-uifontsroboto

Achieve maximum height with background images

Having trouble with responsiveness on my box containing a background image. I am aiming for the box to adjust its height based on the background image, as I have set the background-size attribute to auto. html: <div class="index_boxs" id="discover_win ...

javascripthtmlcss

What is the method for aligning text to the right side within a ListItem?

Currently, I have these elements where the "YoYo" text is aligned to the left by default. However, I am looking to adjust the positioning of some "YoYo" texts so that they can appear on the right side. I attempted to provide a style object with justifyCon ...

cssreactjsflexboxmaterial-ui

Exploring ways to access an element's background color through JavaScript

Is there a way to access an element's CSS properties that are set by a class name in JavaScript? In the case of the first div element, I have applied a "red" class which sets its background color to red. However, when I try to access the div's b ...

javascripthtmlcss

Positioning absolute elements negatively in Firefox may cause unexpected behavior

I attempted to position an absolute element with a negative value, and it works perfectly in every browser except for Firefox. In Chrome, IE, or Safari, the blue handler box is correctly positioned in the middle of the top border. Is there a workaround to ...

htmlcss

Does this extensive combination of pseudo classes hold true?

Here's the code snippet I am working with: .fontmenu .fontlist{ position: absolute; bottom:30px; display:none; } .fontbutton button:hover .fontmenu .fontlist{ display:block; } <div class="fontmenu"> ...

htmlcsscss-selectorshoverpseudo-class

Angular Material Spinner with Custom Image Icons - (mat-spinner)

I have successfully implemented the mat-spinner in my project with configurable changes like color and mode of spinning. However, I am now looking to add an image icon, specifically the logo of a brand or company, inside the spinner. How can I achieve this ...

cssangularangular-material2

Choose the immediate sibling located right after a specific element

My goal is to have the second paragraph following a h1 element display a dropcap, with the first being reserved for the author and date. Although I've tried using different CSS combinations like h1 + p::first-letter {}, it only affects the first para ...

css

Place a "sticky" button directly below a second "sticky" navigation bar

Within my app file, I have customized components like an appbar and various page elements: const styles = theme => ({ appBar: { width:'100%', }, }); class App extends Component { render() { const {classes} = this.props; ...

cssreactjsmaterial-ui

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

javascriptcssvideohtml5-videovideo.js

Choose all list elements except the final one

I need to display a list of tags horizontally and add a comma after each item except for the last one. Here is how I can achieve this using CSS: ul.tags { list-style: none; } ul.tags > li { display: inline; } ul.tags > li:after { con ...

htmlcsscss-selectors

What is the reason that object-fit does not affect the width or height?

I am facing an issue with an image in a div where the image is not resizing properly when using object-fit: contain. The width of the image remains unchanged, causing padding to appear around it. https://i.stack.imgur.com/D0wym.png Is there a way to make ...

htmlcssflexbox

Manipulate the timing of css animations using javascript

I am currently working with a progress bar that I need to manipulate using JavaScript. The demo of the progress bar has a smooth animation, but when I try to adjust its width using jQuery $($0).css({'width': '80%'}), the animation disap ...

javascriptjquerycsscss-animations

React Div Element Not Extending to Web Page Margin

creating white space between the green div and both the top and sides of the screen This is my index page export default function Home() { return( <div className = {stylesMain.bodyDiv}> <div>home</div> &l ...

htmlcssreactjsreact-nativeweb-testing

Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout

I'm in the process of developing a web application, but I've encountered an issue with iOS7 where there seems to be a conflict between jquery.touchSwipe and my "on click" events. Interestingly, the web app functions perfectly on older iOS versio ...

jqueryhtmlcssios7

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...

javascriptjqueryjquery-uicssangularjs

Can IE(7?) cause distortion of backgrounds from sprites?

This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...

cssinternet-explorerbackground-imagesprite

Two distinct sets of radio buttons with separate functionalities

I have a unique situation where I have two distinct sections that contain sets of radio buttons with different values and IDs. However, I am facing an issue as I can only select one button at a time for both sets. My requirement is to have these two sets ...

csshtmlradio-button