Search code examples
htmlgithubfontsgithub-pages

Importing Google API fonts not applying in github pages

I hosted a theme on GitHub pages , this theme working properly in localhost environment, but when I host this its not applying correct font which are importing form Google API

Difference here

Local host version

enter image description here

Githhub Page Version

enter image description here

This is my Index.html page 

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;">
    <title>Sample Name</title>  

    <!--( b ) CSS Stylesheets -->

        <!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

        <!-- Library -->

    <link type="text/css" rel="stylesheet" href="library/font-awesome/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="library/popup/popup.css">
    <link type="text/css" rel="stylesheet" href="library/owl-carousel/owl.carousel.css">
    <link type="text/css" rel="stylesheet" href="library/owl-carousel/owl.theme.css">


        <!-- STYLE Sheets -->

    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/responsive.css">

    <!--( c ) Javascript For Browser Support Issues -->

    <script type="text/javascript" src="library/modernizr/modernizr.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->    

    </head>
<body>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="library/jquery-easing/jquery.easing.min.js"></script>
    <script type="text/javascript" src="library/easy-pie-charts/jquery.easypiechart.min.js"></script>
    <script type="text/javascript" src="library/mixitup/jquery.mixitup.min.js"></script>
    <script type="text/javascript" src="library/popup/jquery.popup.min.js"></script>
    <script type="text/javascript" src="library/owl-carousel/owl.carousel.min.js"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="library/gMap/jquery.gmap.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

When I debug this using firebug I saw that theme fonts rendering from Google api fonts as following in style.css file

@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 { ...

So what can I do here

Solution

  • I think this might be because the github page is using HTTPS but the font URL is HTTP.

    Can you try changing the URL by removing http: like in this example?