aristosarseno
@aristosarseno
studying html css.

Не подключается google fonts?

Не могу подключить шрифт для кириллицы. Спокойно подключал для латинского написания, но русские символы игнорирует полностью. В чем проблема?

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Дзеранов Артур 211-351</title>
        <meta charset="UTF-8">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Jura&display=swap" rel="stylesheet">
        
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header> 
            <div class="AllHederMenu">
                <div class="logo">
                    <h1>Streetwear Day</h1>
                </div>
                <div class="TopMenu">
                    <ul>
                        <li><a href="index.html">Дом</a></li>
                        <li><a href="#">Categories</a></li>
                        <li><a href="Support.html">Support</a></li>
                        <li><a href="SiginIn.html" class="Sigin">Sigin In</a></li>
                        <li><a href="Register.html" class="Sigin">Register</a></li>  
                    </ul>
                </div>
            </div>
        </header>
        <main>
            <div class="Main-window"><!--Главное окно в котором вся инфа(начало)-->
                <div class="Window-light"><!--Прямоугольное Окно внутри(начало)-->
                    <p>
                        "But I must  idea of praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. 
                    </p>
                </div><!--Прямоугольное Окно внутри(конец)-->         
                    <div class="window-big"><!--Прямоугольное большое Окно внутри(начало)-->
                    <p>
                        "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
                    </p>
                </div><!--Прямоугольное большое Окно внутри(конец)-->
            </div><!--Главное окно в котором вся инфа(конец)-->
        </main>
    </body>
</html> 






<code lang="css">

*{
    margin: 0px;
    padding: 0px;
}
header{
    display: flex;
    justify-content: center;

}
body{
    font-family: 'Jura', sans-serif;

    font-family: 'Chakra Petch', sans-serif;
    background-color: black;
    color: white;
    font-family: 'Chakra Petch', sans-serif;
    background-image: url(images/backgroundIMG.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}



.logo, .TopMenu{
    display:inline-block;
    font-size: 20px;
    color: white;
    vertical-align: middle;
    margin-right: 25px;
    font-family: 'Chakra Petch', sans-serif;
}

.TopMenu li{ 
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;

}

.TopMenu a{
    font-family: 'Chakra Petch', sans-serif;
    font-size: 20px;
    color: white;
    vertical-align: middle;
    text-decoration: none;
    
}

.TopMenu a:hover{
    color: rgb(49, 194, 16);
    
}

.logo h1{
    font-family: 'Chakra Petch', sans-serif;
    font-size: 30px;
    vertical-align: middle;
    color:white;
}

.Sigin{
   text-align: right;
}
li:hover{
    opacity: .80;
    font-weight: bold;
    transform: scale(1.1);
}



.Main-window{
    margin: 50px auto;
    background: black;
    height: 800px;
    width: 900px;
    padding: 20px;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
    color: white;
    
}

.Window-light{
    margin: 0px;
    background: black;
    height: 400px;
    width: 200px;
    padding: 20px;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
    color: rgb(49, 194, 16);
}

.window-big{
    margin: 30px 30px 10px 0px;
    background: black;
    height: 290px;
    width: 850px;
    padding: 20px;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
    color: rgb(49, 194, 16);
}


button{
    cursor: pointer;
    padding: 10px 30px;
    height: 50px;
    color:white;
    background-color: rgb(49, 194, 16);
    border: none;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
}
button:hover{
    opacity: .80;
    font-weight: bold;
    transform: scale(1.1);
}



</code>
  • Вопрос задан
  • 268 просмотров
Решения вопроса 1
@archelon
А зачем у вас дублируется правило?
body{
    font-family: 'Jura', sans-serif;

    font-family: 'Chakra Petch', sans-serif;
}

Второе правило переписывает предыдущее.
Причем шрифт Chakra Petch указан дважды для body, и затем еще для нескольких элементов, хотя судя по показанному коду, он даже не подключен.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
EPIDEMIASH
@EPIDEMIASH
Человек швейцарский нож
Так и подключите все в рамках css

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;600&display=swap');
body {
font-family: 'Jura', sans-serif;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы