Импорт шрифтов Google API, не применяемых на страницах github

#html #github #fonts #github-pages

#HTML #github #шрифты #github-страницы

Вопрос:

Я разместил тему на страницах GitHub, эта тема работает должным образом в localhost среде, но когда я размещаю ее, не применяется правильный шрифт, который импортирует форму Google API

Разница здесь

Версия локального хоста

Версия страницы Github

Это моя Index.html страница

 <!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>

Когда я отлаживал это с помощью firebug, я увидел, что тематические шрифты отображаются из шрифтов Google api следующим образом в style.css файле

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

Итак, что я могу здесь сделать

Ответ №1:

Я думаю, это может быть связано с тем, что страница github использует HTTPS, но URL-адрес шрифта — HTTP.

Можете ли вы попробовать изменить URL, удалив http: , как в этом примере?

Ответ №2:

Вы можете использовать // для доступа к внешним URL-адресам

 @import url(//fonts.googleapis.com/css?family=Hind:300,500);
@import url(//fonts.googleapis.com/css?family=Open Sans:400,400italic)

Ответ №3:

Ответ Роба отлично исправил мою проблему. Я только что добавил следующий код в свой файл CSS.

 @import url(//fonts.googleapis.com/css?family=Hind:300,500);

body {
    font-family: Hind;
}