Govuk-frontend: IE8 causes 404 errors when using Frontend 3.0

[petergphillips]

We recently upgraded our app to Frontend 3.0.

As a result we have noticed that we are getting lots of 404 errors in our server logs from IE8 users requesting invalid URLs e.g.
https://gateway.prod.nomis-api.service.hmpps.dsd.io:443/auth/fonts/bold-b542beb274-v2.woff2)%20format(%22woff2%22),%20url(/auth/fonts/bold-affa96571d-v2.woff)%20format(%22woff%22

It looks like IE8 doesn't understand the @font-face directive and treats format("woff2"),url( as part of the URL too.

As a side issue woff2 isn't supported in IE8 so shouldn't be included in the IE8 css (https://github.com/alphagov/govuk-frontend/blob/master/dist/govuk-frontend-ie8-3.1.0.min.css).

[36degrees]

Thanks for reporting, @petergphillips

I've been able to reproduce this in the review app as well – seeing requests for /assets/fonts/light-94a07e06a1-v2.woff2) format("woff2"), url(/assets/fonts/light-f591b13f7d-v2.woff) format("woff" there.

[hannalaakso]

I did some investigation. The font paths themselves could be naively fixed by adding ?#iefix to the end of the URLs which is what we used to do in v2. However this would just mean that the woff2 files get downloaded by IE8 which is redundant as IE8 doesn't support the format.

We could put a govuk-if-ie8 check in font-faces which would stop them being outputted for IE8. This would mean that the font files aren't downloaded by IE8 and we fall back to Arial. This could be an okay fix? However it would mean that CSS for IE8 would still say:
font-family: "GDS Transport", Arial, sans-serif;
which is somewhat confusing but then this is what v3 already does anyway.

Or we could define a font family for IE8.

$govuk-font-family-ie8-fallback-for-gds-transport: Arial, sans-serif;

(we don't have access to govuk-if-ie8 mixin in /settings).

Thoughts? I'll pick this up later.

[Nooshu]

Great investigation Hanna. Looking at this article by Paul Irish, there is a technique on there we could consider.

@font-face {
    font-family:'GDS Transport';
    src:    url(//:) format('no404'),
            url("GDS-Transport-Light-2019-UNHINTED.woff") format("woff"),
            url("GDS-Transport-Light-2019-UNHINTED.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

The url(//:) stops IE raising the 404's.

Before in IE8:

After in IE8:

From my initial testing it stops the 404's, the fonts aren't downloaded in IE8 and modern browsers simply ignore it and use the WOFF2/WOFF fonts. Looks ugly but may be worth considering?

Personally I prefer your solution as it doesn't require the IE8 hack to be in the @font-face declaration for all other browsers.

[hannalaakso]

Thanks @Nooshu 🙂 Paul Irish's solution works but I'm worried that introducing slightly non-standard syntax like this in the CSS file itself could end up causing a browser rendering error or other unintended consequences somewhere along the line.

And like you pointed out as well this would be served to all the browsers.

I'm thinking now that omitting the font-face declaration altogether for the IE8 stylesheet might be the way to go, even if it means that the IE8 stylesheet shows "GDS Transport" in its font-family 🤔

[nickcolley]

Is this an IE8 issue, or an older browser issue?

[hannalaakso]

It's an IE8 issue as it garbles the current font face declaration. IE9+ are okay.

[nickcolley]

So older versions of Firefox, Chrome etc are not impacted?

[nickcolley]

Looking at https://caniuse.com/#search=woff the browsers would have to be very old, so IE8 seems ok to target.

[hannalaakso]

Yeah I think anything like that would fall some way outside our support matrix