title: Custom font doesn't work with Bootstrap
body: <p>I am trying to add a custom font in CSS but it does not work.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Shout!&lt;/title&gt;
      &lt;meta name="author" content="Jordan Baron"&gt;
  
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;
        &lt;img src=images/logo.png alt="logo" height="54" wdth="133" class="logo"&gt;
        &lt;hr class="divider"&gt;
        &lt;h1 id="wis"&gt;Shout!&lt;/h1&gt;
      &lt;/div&gt;
      &lt;script src="scripts.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;    &lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;    &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>@font-face {
    font-family: SanFran;
    src: url(SF-UI-Display-Thin.otf);
  }
  
  div {
    text-align: center;
  }
  
  .divider {
    margin: 0;
    padding: 5px;
  }
  
  .logo {
    margin: 0;
    padding: 5px;
  }
  
  .wis {
    font-family: SanFran;
  }
  </code></pre>
  
  <p>I am using Bootstrap 3 on Mac OS X. I am using Chrome.
  The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change</p>