title: Use Custom Local Font in WKWebView
body: <p>I am attempting to use a local font (one installed with the application) in the CSS of some dynamic HTML presented within a <code>WKWebView</code>. I have read numerous Stack Overflow posts and this <a href="https://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/" rel="noreferrer">webpage</a>. To review what I have done:</p>
  
  <p>The font (in this case <code>ImpactLTStd.otf</code>) is part of the iOS application.</p>
  
  <p>It is entered as part of the application plist in the <em>Fonts provided by application</em> section.</p>
  
  <p>Per the referenced webpage, I can confirm that the <code>ImpactLTStd.otf</code> is listed in the <strong>Copy Bundle Resources</strong> section of <strong>Build Phases</strong> and leads me to believe that the <code>ImpactLTStd.otf</code> is being bundled with the application correctly.</p>
  
  <p>The font is listed in the CSS as:</p>
  
  <pre><code>&lt;style&gt; @font-face {font-family: 'Impact LT Std'; src: local('Impact LT Std'), local('ImpactLTStd'), url('ImpactLTStd.otf'); format('opentype'); } &lt;/style&gt;
  </code></pre>
  
  <p>I reference the font two different ways in this fashion (one by font family and one by font name in order see which one worked and neither did):</p>
  
  <pre><code>&lt;style&gt;  .box_root {    overflow: auto;    background-color: #000000;    padding-top: 1.5em;    padding-bottom: 1.5em;    padding-left: 1.5em;    max-width: 1440px;    max-height: 640px;    display: table;  }  .box_title {    color: #ffd300;    line-height: 1em;    font-size: 85pt;    font-size: 6vw;    font-family: 'Impact LT Std';    text-transform: uppercase;  }  .box_description {    padding-top: .5em;    line-height: 1em;    color: #ffffff;    font-size: 65pt;    font-size: 4vw;    font-weight: bold;    font-family: 'ImpactLTStd';  } 
  </code></pre>
  
  <p>I load the HTML into the <code>WKWebView</code> using <code>loadHTMLString</code>:</p>
  
  <pre><code>webView.loadHTMLString(getHtml(), baseURL: nil)
  </code></pre>
  
  <p>However, the HTML text that is displayed in the <code>WKWebView</code> using the CSS tags does not use the Impact font but instead some default font that looks like Times New Roman.</p>
  
  <p>Anyone have an idea what step I did incorrectly?</p>