title: Importing Google API fonts not applying in github pages
body: <p>I hosted a theme on <a href="https://pages.github.com/" rel="noreferrer">GitHub pages</a> , this theme working properly in <code>localhost</code> environment, but when I host this its not applying correct font which are importing form Google API </p>
  
  <p><strong>Difference here</strong></p>
  
  <p><em>Local host version</em></p>
  
  <p><a href="https://i.stack.imgur.com/5XoIj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5XoIj.png" alt="enter image description here"></a></p>
  
  <p><em>Githhub Page Version</em></p>
  
  <p><a href="https://i.stack.imgur.com/kpf92.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kpf92.png" alt="enter image description here"></a></p>
  
  <p>This is my <code>Index.html</code> page </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" class="no-js"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;"&gt;
      &lt;title&gt;Sample Name&lt;/title&gt;  
  
      &lt;!--( b ) CSS Stylesheets --&gt;
  
          &lt;!-- Bootstrap --&gt;
      &lt;link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"&gt;
  
          &lt;!-- Library --&gt;
  
      &lt;link type="text/css" rel="stylesheet" href="library/font-awesome/css/font-awesome.min.css"&gt;
      &lt;link type="text/css" rel="stylesheet" href="library/popup/popup.css"&gt;
      &lt;link type="text/css" rel="stylesheet" href="library/owl-carousel/owl.carousel.css"&gt;
      &lt;link type="text/css" rel="stylesheet" href="library/owl-carousel/owl.theme.css"&gt;
  
  
          &lt;!-- STYLE Sheets --&gt;
  
      &lt;link type="text/css" rel="stylesheet" href="css/style.css"&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/responsive.css"&gt;
  
      &lt;!--( c ) Javascript For Browser Support Issues --&gt;
  
      &lt;script type="text/javascript" src="library/modernizr/modernizr.js"&gt;&lt;/script&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;    
  
      &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript" src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="library/jquery-easing/jquery.easing.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="library/easy-pie-charts/jquery.easypiechart.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="library/mixitup/jquery.mixitup.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="library/popup/jquery.popup.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="library/owl-carousel/owl.carousel.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="library/gMap/jquery.gmap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I debug this using firebug I saw that theme fonts rendering from Google api fonts as following in <code>style.css</code> file</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Hind:300,500);
  @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
  
  
  
  #preloader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #1a1b23;
      z-index: 10000;
  }
  
  .loader { ...
  </code></pre>
  
  <p>So what can I do here</p>