Google Web font error on mobile

[Ed Hawco]

Hello. I'm using Google Open Sans web font, and it's working correctly all around except for one thing: one specific style does not display correctly on mobile (it shows Times or some other ugly font, indicating it is simply not finding the Open Sans).

The following is declared in the style section of the HTML template:
family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700

In the H+M style repository, all of the styles using Open Sans show the font as "Open Sans" and then a size and either bold or not bold. EXCEPT for the problematic one; that is reported as "Open Sans Semibold" and is shown as bolded.

That "Semibold" seems to be the problem. Google doesn't seem to have a web font called "Open Sans semibold." Yet when I'm defining the style in the H+M style repository it offers me all these Open Sans options:
- Open Sans
- Open Sans Condensed
- Open Sans Condensed Light
- Open Sans Extrabold
- Open Sans Light
- Open Sans Semibold

You can see by the style declaration that I'm declaring four different weights (400,300,600,700). So what's with this disconnect between the style declaration using a numeric weight and the style editor using NAMING for the weights (light, semibold, extrabold)?

More importantly, HOW DO I RECONCILE THESE?

To review, despite this disconnect, it works just fine in Mac and Windows browsers, in Word output and PDF output. It only fails in iOS web browsers. (I don't know about Android...)

[Tim Green]

Hi Ed,

The semibold definition definitely exists for Open Sans and maps to the 600 weight variant of the font. Which skin are you using and how exactly are you making the font reference in the HTML page template? The Devil is usually in the details...

[Ed Hawco]

I'm using Minimalist_Plain_White_WebHelp.hmskin.

Google Fonts are embedded using the baggage file _google_webfonts.html. I added the embed code for Open Sans, using this:

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css"/>

[Tim Green]

Hi Ed,

Basically, you're doing everything right. The fact that it displays correctly in everything except iOS browsers also indicates that the code and mapping are correct. You might want to try installing Firefox and Chrome for iOS and testing in those to get an additional confirmation.

The only possibility that might remain is a cache issue in iOS. Unfortunately, in pursuit of maximum speed, iOS is very aggressive about caching all its resources. The only way to reload a web page with all fresh resources reliably on iOS Safari without using developer mode while physically connected to a Mac is to go into Settings > Safari and actively use the Clear History and Website Data option. Also unfortunately, this is a very blunt instrument that doesn't allow you to keep things like your login cookies etc. It just delivers a single, unconfigurable shotgun blast to your cache, history, cookies and everything else. It makes developing web pages for mobile iOS devices without a current Mac computer a serious PITA.

[Ed Hawco]

I find it easier to use the GF Protocol* than the blunt instrument of iOS cache clearing. Sadly, I tried on both FF and Chrome on iOS and the problem was still there, as it was after using the GF Protocol.

I guess I'll just have to live with it. Not a deal breaker, as few of our customers will consult the documentation on mobile, and this problematic font weight is only used in one style that isn't used very often.

* GF Protocol:
1. Send the URL to your girlfriend (GF), who you know has never visited the site.
2. Look at her iPhone to obtain the results.

[Tim Green]

Hi Ed,

Sadly, I tried on both FF and Chrome on iOS and the problem was still there, as it was after using the GF Protocol.

This is odd and I'd like to have a look at it. If possible, please mail me a small demo project with one or two affected topics and the copy of the .hmskin file you're using and I'll look into it here. Files containing scripts get blocked by mail servers now, even in zips, so it would be ideal if you could just provide a OneDrive or DropBox link to the zip. Alternatively you can use the excellent Firefox Send service, which can be used free with any browser:

https://send.firefox.com/

Firefox Send is free, anonymous and secure and can be set up to delete the files you are sending as soon as they have been received.

[Ed Hawco]

Thanks Tim. I've sent you an email with a FF Send link in it.