Certain Text on Website Wont Load in Chrome?

Community
1

Hello,
I created a website for a horse rescue not long ago and everything was working fine until I showed someone at work, who opened the website in Chrome and very strange things started happening! The navigation wont load until you hover your cursor over it, and certain page titles and text doesn’t load until a seemingly random amount of time has passed. The website seems to be working good in Firefox, Sarafi, and IE - and when I developed it I used Chrome and everything was working fine up until recently I guess. I know that it’s not my computer/addons on Chrome etc because I first noticed on a coworkers chrome.

The site is built with Wordpress using Strappress - a bootstrap theme. I have disabled all plugins and the problem was still there so it’s not that. I am at a loss! Any help would be greatly appreciated.

Old Friends Canada Horse Rescue

PS, sometimes it loads fine so no I am not crazy! Let me know what happens when you visit the site.

2

Works fine for me in the latest Chrome for Mac.

3

The site is apparently supposed to be responsive. It has some problems at different widths, but I do not see the menu issue that you described in Chome on the PC. You might want to revisit your media queries including the meta tags in the head.

4

You are loadiing some of the CSS from external sites

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

Maybe there was a problem with those sites?

Do you not need the “http:” for the “netdna”?

5

I guess I messed up the responsive by trying to use the Bootstrap CDN today to speed up the site - it’s back to normal now. I’m attaching a photo of what happens in my chrome. As you can see ‘Home’ only shows up after my cursor hovers over it and you’ll see that the text in the header as well as the headings for the 3 callouts, the main text and sidebar aren’t showing. This isn’t happening for anyone else?

6

I was trying to use the Bootstrap CDN instead of linking to all of the separate css files to speed up the site, I got those links from http://www.bootstrapcdn.com/ But what I did screwed up some other parts of the site so I reverted back.

7

Hmmm. It looks fine for me using Firefox but like your attachment using Chrome (Windows 7)

I’ve never seen external links like
href="//www"
but always like
href="http://www"
but that is indeed how bootstrapcdn shows them.

Maybe they’re assuming people will know the http: belongs?
Maybe some browsers auto-correct the error and some don’t?

Try adding the “http:” before the slashes and see if that fixes things.

8

Hi,

This is what I see in Chrome in WinXP. The menu behaves nicely and the other bugs at narrower widths have disappeared.

9

Ahh this will drive me crazy! Some of the times for me absolutely none of the text on the page shows up, I can’t seem to find a solution. There’s plenty of google results about Chrome not showing some elements on page but the solutions are for fixing it on your own Chrome, not for web designers/developers to fix their website.

10

This is a wild shot, but try changing the default font from a Google font to a common PC font.

11

Didn’t help :frowning: I had an epiphany today and thought for sure that it was something I added to the .htaccess that was screwing things up, but I’ve emptied the .htaccess and it did no good. Gahh.

12

Perhaps clear Chrome’s cache etc. to get a fresh start?

13

If the problem were showing up in Firefox, I would suspect a JavaScript vs. Firefox bug. Howsomever…

Perhaps one of the external resources isn’t responding reliably. Start disabling external links one at a time and see if disabling one makes a significant difference.

If that doesn’t work, break out the sledge hammer. Go through the same routine with JavaScripts, the HTML and then the CSS. It’s tedious, but something specific is causing it. You may discover a problem that only shows up on certain devices, but first you have to find out who the conflicting actors are.

14

Thanks… breaking out the sledgehammer… I’ll let you know what i can find out.

15

So in the end… google fonts were the problem. Well I shoudn’t say that - CUSTOM fonts were the problem because the text that wasn’t working in the beginning was custom fonts I brought in using @font-face… so I made them a google font still didn’t work, so I made the body text helvetica and changed the handwritten looking font in header and on callouts to a google font and all is well in the world. For some reason it can only handle one ‘special’ font? At work I use 2 different google fonts on websites all the time, I just don’t get why it won’t work for this website. Again it’s not the server because it’s happening in my local testing environment (MAMP) even with all third party plugins turned off.

Thanks everyone for the help, ronpat when you suggested this the text that wasn’t working wasn’t a google font and I… can’t even explain why I didn’t figure it out then lol.

I am still not happy about the website only accepting one google font, especially in GOOGLE chrome - if anyone has any information on why this would be the case that would be great!

16

Thanks very much for the feedback, amberbam. Hopefully, someone will be able to shed some light on the Google font thing.

Cheers

17

I’m having the exact same issue with a site I’m building with Bootstrap 3. Firefox, IE and Safari work fine. I (was) using several Google fonts, but even if I comment-out all but one, I still experience the problem. I’m using Windows 7, local Apache, Chrome version 33.0.1750.154. I experience the issue locally and via the server. I’ve just started troubleshooting the issue. I found the link below, however, all of my font-weight assignments look good. I’m going to try TypeKit and see if that works.

18

Thanks for the post, rebrink. Please let us know what you find.

19

See the link below. It appears this is a known issue that is currently being worked on. After reading the comments, it appears to be happening in several different versions of Chrome. Some TypeKit users are also seeing the issue. There are some possible workarounds mentioned. I tried the workaround mentioned in post #42 and it appears to have fixed the problem for me.

https://code.google.com/p/chromium/issues/detail?id=336476

20

Thank you for posting the follow-up, @rebrink, and especially for the resource. I have a feeling others will be needing it :slight_smile: