title: Different font on strong elements for Internet Explorer 11 and Safari on iOS 9
body: <p>I have a web app with two fonts, Amatic SC for <code>h1</code> and <code>h2</code> and Open Sans for the rest. The webpage displays <code>strong</code> text fine on most browsers:</p>
  <p><a href="https://i.stack.imgur.com/Q1Cov.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q1Cov.png" alt="Display on Firefox and most browsers" /></a></p>
  <p>For Safari on iOS 9 (tested on iPhone 4S) and Internet Explorer 11 on Windows 8.1 (tested on LambdaTest), the <code>strong</code> elements use the font from the <code>h1</code> and <code>h2</code> elements:</p>
  <p><a href="https://i.stack.imgur.com/OU47j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OU47j.png" alt="Display on iOS 9 Safari and Internet Explorer 11" /></a></p>
  <p>The relevant CSS for these elements is:</p>
  <pre><code>@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;
  }
  </code></pre>
  <p>The website is at <a href="http://www.emotionathletes.org" rel="nofollow noreferrer">www.emotionathletes.org</a> if you want to further inspect.</p>
  <p>What is the reason for the use of a different font on iOS Safari and Internet Explorer?</p>
  <h2>Minimal reproducible example</h2>
  <p>Following the comment, I narrowed the issue to the loading of the fonts. If I load them in the <code>head</code> of the HTML, linked to Google Fonts, then the page displays well. If I load them locally in the CSS with <code>@font-face</code> from a <code>woff</code> or <code>woff2</code> 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.</p>
  <p>A minimal reproducible example has HTML file <code>strong.html</code>:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
      &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;strong.css&quot;&gt;
      &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot;&gt; 
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Amatic+SC&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;Summary&lt;/h2&gt;
      &lt;p&gt;The Bulgy series, whose first season is &quot;Emotion Athletes&quot;, has the following purposes:&lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;
          transform the &lt;strong&gt;difficulties&lt;/strong&gt; of the &lt;strong&gt;pandemic&lt;/strong&gt; into   &lt;strong&gt;opportunities&lt;/strong&gt; for children to &lt;strong&gt;recognise what they are feeling,   understand the reason, and use their emotions&lt;/strong&gt;;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and CSS file <code>strong.css</code>:</p>
  <pre><code>/*
  Amatic SC and Open Sans are Google Fonts:
  
  https://fonts.google.com/specimen/Amatic+SC?sidebar.open=true&amp;selection.family=Open+Sans#about
  
  https://fonts.google.com/specimen/Open+Sans?sidebar.open=true&amp;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;
  }
  </code></pre>
  <p>I put a live version at <a href="https://www.emotionathletes.org/strong.html" rel="nofollow noreferrer">www.emotionathletes.org/strong.html</a>, with CSS file at <a href="https://www.emotionathletes.org/strong.css" rel="nofollow noreferrer">www.emotionathletes.org/strong.css</a>.</p>
  <p>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?</p>