title: Font family doesn't work on iPhone and footer freezes mid screen in iPhone
body: <p>So i completed the website, but i seem to be getting a few errors. The font works fine on my computer, and the footer is positioned in the right place, but when I check the website on my iPhone, the footer is misplaced, and the font is different. I searched for fonts on google fonts and found one called OpenSans because I believe I read somewhere that those fonts are compatible with on a lot of mediums? Could someone please help? Thanks for your time to help, have a good day!</p>
  
  <p>Here is a link to the screenshot to see what it looks like on the phone:<a href="http://imgur.com/Fgfjg54" rel="nofollow">http://imgur.com/Fgfjg54</a></p>
  
  <p>the website is pinzoniradian.com if seeing the website would help to find solution if you need to inspect, or if you could see if you get any errors on your devices or systems. I am using a mac and my friend told me the images look slightly blurry on his computer compared to the pdf files i showed him.</p>
  
  <p>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;Lindsey&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;link href="css/yourCustom.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;/head&gt; 
  &lt;body&gt;
  &lt;nav role="navigation" class="navbar navbar-default navbar-static-top"&gt;
      &lt;div class="container"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a href="index.html" class="navbar-brand" style="color:#000000"&gt;Paulo Pinzon-Iradian&lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- Collection of nav links and other content for toggling --&gt;
          &lt;div id="navbarCollapse" class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="work.html" style="color:#000000; margin-left:1.5em;"&gt;Work&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html" style="color:#000000; margin-left:1.5em;"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html" style="color:#000000; margin-left:1.5em;"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
        &lt;div id="carousel-example-generic" class="carousel slide" data-interval="false"&gt;
          &lt;div class="carousel-inner" role="listbox"&gt;
            &lt;div class="item active"&gt;
              &lt;img src="lindsey.jpg" style="width:370px;" alt="lindsey"&gt;
              &lt;figcaption&gt;Lindsey&lt;/figcaption&gt;
              &lt;figcaption&gt;Damaged iPhone and Image&lt;/figcaption&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="left carousel-control" href="liferockslifesucks.html" role="button" data-slide="prev"&gt;
            &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="malek.html" role="button" data-slide="next"&gt;
            &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
    &lt;footer class="footer"&gt;
        &lt;div class="container" style="display: table; height: 50px; overflow: hidden;"&gt;
          &lt;p class="text-muted" style="display: table-cell; vertical-align: middle;"&gt;&amp;copy; 2013-2015 Paulo Pinzon-Iradian, All Right Reserved&lt;/p&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>@font-face
  {
      font-family:OpenSans-Regular;
      src:url(fonts/OpenSans-Regular.ttf);
  }
  
  .navbar-default{
      background: #fff;
      margin-top:2%;
      border:0px;
  }
  
  .navbar-brand
  {
      font-family: Open Sans;
      font-size: 22px;
  }
  
  ul, li, a
  {
      font-family: Open Sans;
      font-weight: 400;
      font-size: 22px;
      color: #000000;
      font-weight: 100;
      letter-spacing:-1px;
  }
  
  .navbar-toggle
  {
      border:0px;
  }
  
  
  .container .jumbotron.no-padding
  {
      background: #fff;
      border:0px;
      font-family: Open Sans;
      font-size: 22px;
      text-decoration: none;
      padding-left: 0;
      padding-right: 0;
      color:#000000;
  }
  
  .footer {
      position: absolute;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      text-align: right;
  }
  .footer .container {
      width: 100%;
  }
  
  .right.carousel-control, .left.carousel-control {
      opacity: 0;
      filter:alpha(opacity=0); /* IE support */
      width:50%;
      height:100%;
  }
  
  img
  {
      margin:auto;
  }
  
  figcaption
  {
      display:block;
      text-align:center;
      margin-left:auto;
      margin-right: auto;
  }
  </code></pre>