Text appears unclear and fuzzy when using Firefox browser

While my website looks fine on Chrome and Opera, it appears blurry on Internet Explorer and Firefox. I've tried researching and applying different CSS styles, but nothing seems to work. Both my Firefox and Internet Explorer versions are up to date, and I'm not using Google Font. Here is an example of my styles.

@font-face {
  font-family: 'Gotham-Bold';
  src: url('../fonts/Gothambold/Gotham-Bold.eot');
  src: url('../fonts/Gothambold/Gotham-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Gothambold/Gotham-Bold.woff') format('woff'), url('../fonts/Gothambold/Gotham-Bold.ttf') format('truetype'), url('../fonts/Gothambold/Gotham-Bold.svg#') format('svg');
}

body{
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}

View in Firefox: https://i.stack.imgur.com/Vn7iT.png

View in Chrome: https://i.stack.imgur.com/JCHPK.png Despite trying various solutions, I am still facing this issue. Any suggestions?

htmlcssfirefox

Answer №1

This issue was previously brought up and resolved in this particular discussion.

To sum it up...

The root cause:

A problem with Firefox on Mac computers arises when the setting "Use LCD font smoothing when available" (Settings > General > Use LCD font smoothing when available) is enabled. (This setting is enabled by default).

Note: This issue typically occurs on non-retina screens connected to Macs, rather than on the actual retina display.

To resolve this, simply disable that setting and restart Firefox to see an improvement in font appearance!

The solution:

For users who prefer to keep the aforementioned setting enabled, just add the following declaration to the body of the code:

-moz-osx-font-smoothing: grayscale;

You'll notice a positive difference right away.

Answer №2

If you're experiencing blurry or pixelated text in Firefox, it could be because ClearType is not enabled on your Windows system. To enable it, follow these steps:

  1. Go to the Windows search bar and look for 'Adjust ClearType Text'
  2. Tick the box to activate ClearType and then click 'Next'
  3. Proceed through the prompts to adjust the ClearType settings and click 'Finish'

I had a similar problem and this solution worked for me. Source.

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

Change the appearance of a div based on the presence of a certain class within a child div using jQuery styling techniques

I'm trying to set a default padding of 15px for div.content, but if it contains a child div.products-list, I want the padding to be removed. I've looked into solutions using jquery, but nothing seems to work. Here's how my layout is structur ...

jquerycssparent

Is there a way to modify the text color within the thumb-label of the Vuetify v-slider component?

Lately, I've been facing some challenges and my objective is to change the color of the thumb label on my v-slider to a custom one that is defined in the component's design. Can anyone provide guidance on how to achieve this? Regards, Joost ...

cssvue.jsvuetify.jstextcolorv-slider

Issues with HTML text areas tags not being recognized after submitting a form occur specifically in Internet Explorer

I am encountering an issue with my form. I have a textarea field within the form, and on submit, I am trying to copy the content of a div containing a table into this textarea field. However, when I send this form and the email in IE, the values appear as ...

phpjqueryhtmlforms

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

javascripthtmlcssaccordion

What could be the reason for the malfunctioning toggle button on the Bootstrap navbar?

I'm having trouble with my bootstrap navbar. I've added the .sidebar-collapse class to the body tag so that when I click on the toggle button, the data should appear on the right side. However, this isn't happening. Can anyone spot what&apos ...

htmltwitter-bootstrapbootstrap-4

Is it possible for me to include a static HTML/Javascript/jQuery file in WordPress?

My extensive HTML file contains Javascript, jQuery, c3.js, style.css, and normalize.css. I am wondering if I can include this file as a static HTML page within Wordpress. Say, for instance, the file is called calculator.html, and I want it to be accessib ...

javascriptjqueryhtmlcsswordpress

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...

javascripthtmlnode.jsyeoman

AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...

javascripthtmljquerycssajax

Tips for implementing HTML5 validation followed by automatic redirection to a different page

I'm new to web development and struggling with how to make a button both validate inputs and redirect to another page. Using the onclick = "" function, I can validate inputs like emails and telephone numbers, but I'm having trouble making it so t ...

javascriptphpjqueryhtmlvalidation

Utilizing the hcSticky plugin for creating a scrolling effect on webpage content

I'm attempting to utilize the JQuery plugin, hcSticky, in order to achieve a scrolling effect on my fixed content. However, I seem to be encountering some difficulty getting it to function properly. What could I possibly be doing incorrectly? JSFIDDL ...

jqueryhtmlcss

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

AngularJS Gallery Showcase

Trying to showcase a collection of videos in a modal using angular.js, I decided to implement the solution from . However, I encountered difficulty in integrating my scope variables into the "html5gallery" class. <div class="html5gallery" data-skin="ho ...

jqueryangularjshtml

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error: jQuery is unable to access the property 'xxx' because it is undefined

While attempting to make a post request from the site to the server with user input data, I encountered an error message saying TypeError: Cannot read property 'vehicle' of undefined as the response. Here is the HTML and script data: <!DOCTY ...

javascriptjqueryhtmlnode.jsexpress

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

Whenever I try to set the language using the code gettextCatalog.setCurrentLanguage(langString);, it doesn't seem to affect my side-nav menu. My side menu has two possible states: expanded or collapsed, and I use ng-include to control its content base ...

javascripthtmlangularjsangular-gettext

Tips for Showing Certain Slides When the Page Loads

When using jQuery filter effects to organize div slides on a page, I encountered an issue where all the divs containing different slides are displayed on page load instead of just the default chosen ['active'] div. The filter effect itself is fun ...

javascriptjquerycsshtml

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

Iterating through every image displayed on a webpage

Two inquiries: What is the best way to efficiently loop through every image on a specific webpage and open each one in a new browser tab? Similar concept, but instead of opening in a new tab, I am interested in substituting different images for the ...

javascripthtmldom

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

javascripthtmlcssattributescoding-style