kez kez - 1 month ago 13
HTML Question

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

jga jga
Answer

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?

Comments