Google websites display invisibility on page load

Question

I am pretty puzzled by this and not sure how to set an example.

Using Bootstrap for my site. Downloading Google Web-Font, as I have done several times in the past and never had a problem.

For some reason, H1 and H2 are invisible until I select them with the mouse, or scroll to the end of the page and then create a backup. Sometimes when loading the page I can see small pieces of the font, for example, the bottom of a pair of letters, etc.

Or, if I open the validation panel and switch NOTHING related to the font ... like size, color, etc., they will appear.

This only happens in Chrome.

Any suggestions? Never seen this before.

Answer 1

My answer is more like the situation "I do not understand, but I'm glad that I understood." The content area that came before the content area that I came across was related to using webfont in some links. I had a font size of 18px for these links. Changing the font size to 21px or 14px and several other sizes solved the problem.

I DO NOT understand why ... Perhaps the web font is not compatible with the size of 18 pixels? But I never came across this ... it makes no sense. Perhaps someone else can shed light on this topic.

Answer 2

I also come across this. I was able to “fix the glitch” using JavaScript to change any CSS property on the affected elements after the page has finished loading.

An example of using jQuery:

$(window).on('load', function() { $('h1,h2,h3,h4,h5,h6').css('zoom',1); });