Different Fonts Display on Different Machines?

[Kent]

I'm having a problem - well, not a problem really. An issue I don't understand.

I'm getting different font displays when I view my site in different locations and I'm not sure why. I'd prepared a screenshot comparing the two, but now realize we can't attach anything here. (Hint, hint: Forum feature request.)

My site is here: http://www.ibsltd.ca/pub/conservation_council/

I'm using Chrome as my browser both home and at work, and both on iMacs. When I view at home, the fonts are bolder and not condensed. At work, they are condensed drastically. I guess I'm confused, because I thought we were past the days of being dependent on fonts being installed locally on a machine, I thought the fonts - specifically for these Genesis themes - were all web based.

The site is built on the Executive theme and I didn't make any alterations to fonts or the font css styles.

In addition, holy crap, I just checked the theme demo on the Studiopress site and it looks different from my office as well.

Can anyone tell me what's up/how to standardize the display across both/all locations? What am I missing? Is there a preference in Chrome that applies to how fonts are rendered?

Edit: I just checked home here on Safari and it looks the same as Chrome, so I'm guessing it must be some kind of machine issue?

Thanks,

-Kent

---

Dad. Biker. Designer. | kentfackenthall.com

[Bill Murray]

Take a look at my response here and see if that provides any insight.

Although you can't post a screenshot here, you can make a screenshot, upload it to your media library, and post a link here.

With Google webfonts, it might be hard to standardize across all browsers, if one of them is Chrome. You also have to take into account the size of your browser's viewport, since your theme is mobile responsive. If 1 of your computers has a larger screen and one a much smaller screen, you may be triggering one of the responsive media queries. The media queries are not triggered by your device being mobile; they are triggered by maximum screen width, which you can change simply by shrinking your browser.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Kent]

Bill,

Thanks for the info. I didn't think of the link to the media library bit. Screenshot is here.

On the left is my home Mac which has a 23" display  - the right is work, which has a 21" display. So what you're saying is Chrome is reading the screen size and adjusting the fonts accordingly?

Would stripping the 'mobile-responsiveness' from the theme solve anything?

-Kent

---

Dad. Biker. Designer. | kentfackenthall.com

[Bill Murray]

Here are some ideas. My quick guess would be to pay close attention to #7.

1) I don't think you want to ditch the mobile responsiveness.

2) What's the horizontal resolution of your 2 setups (21", 23"), and do you have your browser maximized? If not, do you know the width of your viewport?

3) The title of the post in your screenshot is being rendered with Open Sans, which is a Google webfont. Browser to browser (ie, sticking to Chrome), the only thing that should change that is the width of your browser viewport, which might trigger a media query, but I don't see anything in the media queries which would produce the result in your screenshot.

4) In your child theme's style sheet, what is the version?

5) Are you running the exact same version of Chrome on both machines?

6) In your original post, you said Safari at home looks like Chrome at home. But does Safari at work look like Chrome at work? Have you tried Firefox?

7) Do you have Font Explorer active on 1 machine and not another? I recall seeing info that Font Explorer triggered a bug in rendering Google Webfonts in Chrome.

8) Does the Mac have any OS-related function like ClearType in Windows that alters font display? If so, is this enabled on 1 machine and not another? These OS functions can alter the way fonts are displayed, and depending on the font, the result may not be good.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Kent]

Bill,

A thousand thanks for the info. I know right off the bat I don't have Font Explorer installed. I'll check these other items when I get to work tomorrow and let you know if I come up with anything.

Thanks,

-Kent

---

Dad. Biker. Designer. | kentfackenthall.com

[Kent]

Bill,

To answer your questions.

1. Ok.

2. Window is maximized. Work display 21" - resolution is 1920 x 1080. Home display 24" - resolution is 1920 ?— 1200.

3. Dunno anything about viewports or how to find them. Google confused me.

4. Version 2.0

5. I believe so. I will check again when I get home.

6. Yes, the font issue is consistent across each machine. At work, Firefox, Chrome, Safari, all look the same. At home they all look the same, but different than work.

7. Nope. Not even installed on either machine.

8. Not that I'm aware of, checked Preferences and Settings. Plus, been using Macs for almost 20 years, haven't heard of a font setting like aliasing or anything.

I'm wondering one thing, would dumping the Google font and going with a websafe font like Verdana just solve the problem? (I'm asking, but I'll probably try it anyway).

One thing, I was running an external 2nd monitor at work and thought that might be the issue, so I unplugged it and tried again, no dice.

I'll go you one further and say the issue is apparent/present throughout the Studiopress site and this Forum for me. Any Studiopressers out there maybe know whatup? I wish I could tag someone somehow. Andrea R. where are you?

The thing that vexes me the most too, is I dunno what my client is going to end up seeing.

-Kent

---

Dad. Biker. Designer. | kentfackenthall.com

[Andrea Rennick]

Check both home and office to see if one is blocking Google fonts.

That's the difference.

---

**forum signature**
If you need technical support for your theme please file a ticket.

The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

[Bill Murray]

I guess Andrea's thought is that is maybe Kent has some type of authenticating proxy at work. Loading a web font like Google is a cross-domain request, and these are anonymous, and that would prevent authentication on the proxy server. Or it could be just blocked by a firewall.

Kent, you can test the practical implication of this by opening on your work computer the post for which you provided a screenshot. You can inspect the element of the title, which should use the Google Webfont Open Sans. However, the fallback is "sans serif". You can inspect the element and check the computed style to see what font was used to render the post title. If Google webfonts are blocked, it won't be Opens Sans but sans serif instead.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[TravisPri]

I've had issues specifically with Open Sans across browsers. You could try what this person suggests:

http://www.rqna.net/qna/ikuhuw-open-sans-google-web-fonts-rendering-in-chrome.html

In my experience it has been a rendering issue. The font is not being replaced; it does not use the fallback "sans serif." The computed style shows it is using Open Sans but it just looks entirely different. Very frustrating!

[Bill Murray]

@TravisPri - Thanks for the input, but I don't think that solution will help Kent. That solution discusses a problem where the font doesn't look right in Chrome but looks correct in other browsers. Kent's problem occurs in all browsers on 1 machine. That's an indication that Google fonts aren't rendering or something is changing how they render on that machine. If the problem was limited to 1 browser, I'd be more willing to blame Chrome.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[TravisPri]

Ah - I misread. Good call Bill.

[Kent]

Sorry All. Thanks for paying attention. I had forgotten to check the 'notify me of replies' box. I appreciate everyone's help.

Bill, I did open the page and check it out in the Developer inspector of Chrome and though I'm not terribly skilled at using it, highlighting the post title seems to tell me, to the best of my knowledge that it's calling 'Open Sans', sans-serif;

So here's an update for those interested. I checked on several machines at work and all were showing the more condensed version of the font for some reason. These machines all had versions of Open Sans and/or Open Sans Condensed sitting somewhere on the machine itself.

I went back to my machine and deactivated the version of Open Sans I had in my Mac Font Book (the only app I use to manage fonts) - and it did change the appearance of the fonts instantly on reload in my browser. It doesn't look exactly like what I was seeing at home, but it's closer. That being said I have a copy of the font on my machine at home as well I intend to investigate further when I get home tonight.

Finally, I did a search of my computer here at work and completely nuked anything that said 'Open Sans' then reloaded my page. Looks good. Strange thing is I have no idea if that's what whoever designed it intended for it to look like - as I've seen so many iterations of it now. It did also improve the appearance of fonts both here in the forums and throughout the Studiopress site.

I don't know much about browsers and how they render fonts, but a co-worker and I came up with one possible scenario, those in the know can maybe debunk as the case may be.

Is it possible that the browsers (Since this issue happened with all of the big '3', Chrome, Firefox, and Safari) were looking locally for the font first, and if they found it, using that and only going to the actual web font, if there was none present locally?

I'd be curious to hear everyone's thoughts as my utmost concern is obviously what my clients and their viewers are going to see and moving forward I want to do whatever 'best practices' there are with regards to fonts on the web. One of the reasons I dig the Studiopress themes are the fonts and their usage, and I had always kind of assumed they were just turnkey good-to-go out of the box. Is there maybe something I should be doing different?

Thanks,

-Kent

---

Dad. Biker. Designer. | kentfackenthall.com

[Bill Murray]

@Kent - It looks like you've sorted it out. If a font exists on a local computer and that font name is specified in CSS, it will load the local version, not the Google webfont version. That's the reason for the difference.

On the issue of looking exactly alike, your computers have different screen widths, so you can't get them to be exactly alike.

I think you can guess that a theme designer that included a Google webfont and specified it in a stylesheet intended for it to look like the version based on the Google webfont.

There are techniques to circumvent the issue that you ran into, but there are drawbacks. For more, see http://stackoverflow.com/questions/12129355/google-webfont-conflict-with-local-font.

I think you'll find that it takes too much time to make sure every visitor in every browser sees the same thing, and even with extraordinary effort it might be a practical impossibility. Most developers end up settling for achieving reasonable consistency for most users using reasonably current browsers. In your situation, you could research which fonts are rarely installed in a local environment and adjust your typography to use web fonts that aren't likely to be on a local computer. My personal opinion is that is probably not worth the trouble. I think the fact that you & your colleagues have Open Sans installed isn't a common occurrence.

If you like the typography, you're in pretty safe territory assuming that the overwhelming majority of users will see the webfont specified in your CSS.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Kent]

Bill,

Yeah. I tried to log in last night from home and update, but was having some Forum login issues for some reason.

Nuked the font at home last night and the site now looks the same as here at work and everywhere else, so I'm thinking that's a good thing. I'm thinking you're probably right in saying the majority of folks won't have Open Sans installed and thus it's probably a non-issue. In a way thought I'm sort of glad this happened as it's taught me a lesson for the future.

Thanks for your and everyone else's help on this. I appreciate it.

-Kent

---

Dad. Biker. Designer. | kentfackenthall.com

[Author]

Posts