Importing Google API fonts not applying in github pages
<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>