Menu
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
Githhub Page Version
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
207
Open Google Fonts and follow these steps: Find the font and click it (a card with the font), then, click "+ Select this style". On the right side, you'll see a container with the name "Selected family". Click "Embed" and choose <link> or @import depending on where you need to add the font (in HTML or CSS).
To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file.
Google Fonts is a library of 1,442 open source font families and APIs for convenient use via CSS and Android.
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?
71
You can use // for accessing external URLs
@import url(//fonts.googleapis.com/css?family=Hind:300,500);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
