Search code examples
htmlcssiosinternet-explorerfonts

Different font on strong elements for Internet Explorer 11 and Safari on iOS 9

I have a web app with two fonts, Amatic SC for h1 and h2 and Open Sans for the rest. The webpage displays strong text fine on most browsers:

Display on Firefox and most browsers

For Safari on iOS 9 (tested on iPhone 4S) and Internet Explorer 11 on Windows 8.1 (tested on LambdaTest), the strong elements use the font from the h1 and h2 elements:

Display on iOS 9 Safari and Internet Explorer 11

The relevant CSS for these elements is:

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }

@font-face {
  font-family: 'Amatic SC';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}

body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2 {
  margin: 0.5rem 0 0.5rem 0;
  text-align: left;
  font-family: Amatic SC, cursive;
  font-weight: bold;
}

The website is at www.emotionathletes.org if you want to further inspect.

What is the reason for the use of a different font on iOS Safari and Internet Explorer?

Minimal reproducible example

Following the comment, I narrowed the issue to the loading of the fonts. If I load them in the head of the HTML, linked to Google Fonts, then the page displays well. If I load them locally in the CSS with @font-face from a woff or woff2 file, then the strong elements display with a different font on iOS 9 on iPhone 4S and on Internet Explorer 11 on Windows 8.1. The order of loading the fonts in the CSS does not change the result.

A minimal reproducible example has HTML file strong.html:

<!DOCTYPE html>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="strong.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
  </head>
  <body>
    <h2>Summary</h2>
    <p>The Bulgy series, whose first season is "Emotion Athletes", has the following purposes:</p>
    <ul>
      <li>
        transform the <strong>difficulties</strong> of the <strong>pandemic</strong> into   <strong>opportunities</strong> for children to <strong>recognise what they are feeling,   understand the reason, and use their emotions</strong>;
      </li>
    </ul>
  </body>
</html>

and CSS file strong.css:

/*
Amatic SC and Open Sans are Google Fonts:

https://fonts.google.com/specimen/Amatic+SC?sidebar.open=true&selection.family=Open+Sans#about

https://fonts.google.com/specimen/Open+Sans?sidebar.open=true&selection.family=Open+Sans#about

*/


/* comment these @font-faces for the page to work properly. */

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }

@font-face {
  font-family: 'Amatic SC';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}


body {
  font-family: 'Open Sans', sans-serif;
}
  
h1, h2 {
  font-family: 'Amatic SC', cursive;
}

I put a live version at www.emotionathletes.org/strong.html, with CSS file at www.emotionathletes.org/strong.css.

For my own reasons, I prefer to serve the font files from my server than query them from Google Fonts. How can I serve the font files locally and still display them properly on Safari and Internet Explorer?

Solution

  • The issue was in the code, which I found today as I was changing the main font:

    For Open Sans at 700, the woff filepath was:

    /fonts/amatic-sc-v13-latin-regular.woff

    and should have been:

    /fonts/open-sans-v17-latin-700.woff

    Older browsers use woff and not woff2, and so they were doing exactly as they were told. I now fixed the issue.

    Moral of the story: if using local fonts for performance, make sure to do the right wiring of CSS to filepaths.