Issues with Google Fonts displaying poorly on Chrome

While working on my project, I've encountered an issue with the rendering of Source Sans Pro from Google Fonts in Chrome. Sometimes the font completely breaks, and unfortunately, I haven't been able to pinpoint when or why this occurs.

At times, the problem arises upon page load, while other times it happens while scrolling. Reloading the page seems to fix the issue, which is not present in Firefox.

Here is how the font should look:

I've attempted various solutions such as using text-shadow, 

-webkit-font-smoothing: antialiased
, and following the advice provided in this answer.

Any help would be greatly appreciated!

Thank you.

EDIT: The theme is based on Bootstrap 2.3.2, and the font issues began after importing Google Fonts. To provide more context, I have created a JSFiddle at http://jsfiddle.net/NqQ5P/2/. It's worth noting that I do not face this problem on my MacBook but only on Windows (and it seems to affect my customers as well).

cssgoogle-chromefonts

Answer №1

After attempting various solutions, we finally managed to resolve the issue (it no longer occurs when we try to reproduce it). The problem appears to have been fixed after I disabled 

text-rendering: optimizelegibility;
in this particular section of the file bootstrap.css:

h1, h2, h3, h4, h5, h6 {
margin-top: 10px;
margin-bottom: 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
/*text-rendering: optimizelegibility;*/
}

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

How can the spacing between Angular Material's mat-card-content and mat-card-actions be adjusted?

I am creating a mat card layout where there are two separate cards within the main card's content section. However, when I add a button for the actions section of the main card, there is no spacing between these two sections. How can I create a vertic ...

htmlcssangularangular-material

When Selenium launches, Chrome automatically opens the "Data;" address

When I try to begin the test, I encounter the issue of seeing 'data:,' in the chrome address bar and then the program does not proceed to navigate to the URL as expected. I am currently using: chrome=55.0.2883.75 chromedriver=2.25 selenium=3.0.1 ...

javagoogle-chromeseleniumchrome-web-driver

Tips for switching the irregular polygon shape image on click and hoverIf you want to change

I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code: <div class="body_container"> <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" bor ...

javascriptjquerycsshtmladobe-illustrator

Tips for aligning input elements in the center using HTML and CSS

https://i.sstatic.net/3B7F9.jpg Can someone help me center the input vertically within the image? I'm not sure how to achieve this. .headmenu { background-color: rgb(47, 47, 47); width: auto; height: 30px; } .headmenu-right { float: right ...

htmlcss

Tips for positioning button to the right of a text box in Bootstrap

Is there a way to align my button with my text boxes so that the right sides form a straight line? I've been struggling to achieve this without using margin-left (as it only works for one screen size). https://i.sstatic.net/RrEYV.png I attempted to ...

htmlcsstwitter-bootstrapbootstrap-4

A step-by-step guide on creating an automatic image slider using the Swiper class in HTML

I am facing an issue with the swiper-container swiper-slider class, where the images are not sliding automatically. I need the image slider to work automatically without the need to click the next and prev buttons. Below is my code for reference. Instead o ...

jqueryhtmlcssbootstrap-4

`Unable to activate label function in HTML`

As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...

htmlcss

What causes the <td> element to extend beyond the boundaries of the <table>?

I need to add next and previous buttons to a <td> that has an asp:DropDownList. However, when I do this, the <td> ends up overflowing the width of the table. Here is the edited code snippet with the entire table included: <table class=" ...

htmlcssasp.net

Conceal multiple divs at the same time based on their largest dimension

I am facing an issue with two divs, each containing two nested divs: https://i.sstatic.net/QFMiU.png <div class="hide"> <div> Variable size </div> <div> Text1 (also variable size) </div&g ...

javascriptcssangularsass

Apply an active navigation class depending on the current URL in the session

Is there a way to dynamically add an .active class (font-weight:700;) to the active pages navigation menu based on the category in the URL? The system url is constructed using session and category parameters. For example, the homepage for logged-in users ...

javascriptcss

What is the best way to define coordinates or set margins for the autoTable component in jsPdf when using React js?

While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page. Below is the code snippet: import React from "react"; ...

javascriptcssreactjsjspdfjspdf-autotable

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

Wide container using Bootstrap

Currently, I am incorporating Bootstrap v5 alpha to develop a basic dashboard. According to Bootstrap guidelines, it is essential to utilize .container, .container-fluid, or .container-{size}, followed by .row and .col columns. However, I wish for the das ...

csstwitter-bootstrapbootstrap-4sass

Tips for aligning one item in the center and another item on the right with MUI v5

My goal is to center 3 navigation tabs in the middle of my page and have a dropdown on the far right for sorting. I managed to get the dropdown on the far right, but I'm having trouble perfectly centering the 3 navigation tabs inside the <Box> & ...

cssreactjsflexboxmaterial-ui

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

javascripthtmlcss

Enhance the dropdown menu by incorporating a caret icon

Click here for the image, I am trying to incorporate the Bootstrap caret class into my select dropdown menu. .select_menu{ font-size: 12px; outline: none; border: thin #ddd solid; -webkit-appearance: none; -moz-appearance: none; appearance: ...

htmlcsstwitter-bootstrap

Using CSS to align and place elements

Currently facing a challenge with my HTML/CSS code regarding the horizontal centering of two divs (A, B) within one absolutely positioned div (C) that contains background images. Key aspects to consider: The bottom edge of the larger div (A) should alig ...

csshtmlbackground-imagecss-position

Adding ttf files to the content script of a Chrome extension

Currently, I am using a content script to inject some HTML into a webpage. My goal is to incorporate the google font named CabinCondensed-Regular, along with several icon fonts that I obtained from IcoMoon. I have already downloaded the necessary font file ...

javascriptcssgoogle-chrome-extensionfont-facecontent-script

Ways to create intersecting borders at the corners of a division

Is there a technique to expand the borders of a div by 1 or 2 pixels in each direction so that they create a cross at each corner? https://i.stack.imgur.com/mUAxM.png ...

css

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...

cssreactjsnext.js